按屬性查找元素，設置發現元素的不同屬性

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> 

我已經設置了「基金-id」屬性爲「1」，顯示所有這些連接爲1分的記錄，隨後的記錄將是2，3，4等。

我有一個功能，取決於選中的複選框，我將在上面的標籤中顯示出售S或出售B。我的功能看起來像這樣;

$("#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(" "); 
    } 
}); 

我希望能夠做的就是把資金從ID的複選框，查找具有相同相關基金-ID標籤，只是設置標籤的.html屬性是一個「S」和如下圖所示，爲紅色。這是可能的還是我只是在我的思維過程中發生衝突？ 任何幫助，非常感謝。 謝謝 NickG

Answer 1

您將要使用自定義data-樣式屬性來查找複選框的相應標籤。在這個例子中，每個複選框都有data-fund-id和data-label屬性。當複選框被改變時，corect標籤元素的文本被data-fund-id查找，並且（如果複選框被選中），它的文本被設置爲數據標籤值。

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(" "); 
    } 
});