Question

这可能会让其他人感到困惑，因为对我而言，但我想知道是否可以使用jquery根据唯一属性值查找元素，然后设置不同属性的值。基本上我试图通过自定义属性使静态页面看起来动态。

有些html是;

<div class="Sell" style="width: 47px;"><input type="checkbox" fund-id="1" id="chkSell"     class="_1"/></div>
<div class="Buy" style="width: 47px;"><input type="checkbox" fund-id="1" id="chkBuy"     class="_1"/></div>
<div class="BuySelllbl" style="width: 10px;"><label id="lblBuySell_1" fund-id="1">&nbsp;</label></div>

我已将“fund-id”属性设置为“1”以显示所有这些属性连接1条记录，后续记录将为2,3,4等。

我有一个功能，根据选中的复选框，我将在上面的标签中显示S for Sell或B for Buy。我的功能看起来像这样;

$("#chkSell").live('change',function(){
    var y = $(this).attr("class");
    var x = "lblBuySell" + y;
    var fundID = $(this).attr("fund-id");
    //alert(fundID);
    if(this.checked){
        var lbl = $("label").find("[fund-id='" + fundID + "']");
        alert(lbl);
        $(lbl).html("S");
        //$("#" + x).html("S");
        $("#" + x).attr("style","color: red;");
    }else{
        $("#" + x).html("&nbsp;");
    }
});

我想要做的是从复选框中获取fund-id，找到具有相同关联fund-id的标签，并将标签.html属性设置为“S”并且为红色你可以在下面看到。这是可能的，还是我刚刚完成了我的思考过程？任何帮助是极大的赞赏。谢谢， NickG

Answer 1

您需要使用自定义data-样式属性来查找复选框的相应标签。在此示例中，每个复选框都具有data-fund-id和data-label属性。更改复选框后，将通过data-fund-id查找corect标签元素的文本，并且（如果选中该复选框）将其文本设置为数据标签值。

<强> Working demo

<强> HTML

<div class="Sell" style="width: 47px;">
    <input type="checkbox" data-fund-id="1" id="chkSell" data-label="S" />
</div>
<div class="Buy" style="width: 47px;">
    <input type="checkbox" data-fund-id="1" id="chkBuy" data-label="B" />
</div>

<div id="BuySelllbl" style="width: 10px;">
    <label id="chkSell_lbl" data-fund-id="1">&nbsp;</label>
</div>

<强>的jQuery

$(":checkbox").on('change', function () {
    var that = $(this),
        label = $("label[data-fund-id=" + that.data("fund-id") + "]");

    if (this.checked) {
        label.css("color", "red").html(that.data('label')); //the font color should probably just be set in a .css file
    } else {
        label.empty();
    }
});

Answer 2

我想我使用以下代码计算出来了;

$("#chkSell").live('change',function(){
    var y = $(this).attr("class");
    var x = "lblBuySell" + y;
    var fundID = $(this).attr("fund-id");
    //alert(fundID);
    if(this.checked){
        $('label[fund-id="' + fundID + '"]').html("S");
        $('label[fund-id="' + fundID + '"]').attr("style","color: red;");
    }else{
        $("#" + x).html("&nbsp;");
    }
});

按属性查找元素，设置找到的元素的不同属性

2 个答案: