1

这可能会让其他人感到困惑，就像对我一样，但我想知道是否可以使用 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 代表 Sell 或 B 代表 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的标签，并将labels .html属性设置为“S”，并设置为红色，如您所见以下。这是可能的还是我的思维过程不正常？任何帮助是极大的赞赏。谢谢你，尼克

4

2 回答 2

1

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

工作演示

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();
    }
});
于 2013-07-26T15:13:18.733 回答
0

我想我是用下面的代码弄明白的；

$("#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;");
    }
});
于 2013-07-26T15:30:45.917 回答