найти элемент по атрибуту, установить другой атрибут найденного элемента

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 и т.д ..

I есть функция, в которой в зависимости от флажка, который установлен, я покажу 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(" "); 
    } 
}); 

То, что я хочу быть в состоянии сделать это взять фонд идентификатор из флажка, найти ярлык с тем же связанным фондом идентификатором и установить только что метки .html атрибута быть «S» и чтобы быть красным, как вы можете видеть ниже. Возможно ли это, или я просто из-за моего мыслительного процесса? всякая помощь с благодарностью. Thank you, NickG

Answer 1

Вы должны использовать пользовательские атрибуты стиля data-, чтобы посмотреть соответствующую метку. В этом примере каждый флажок имеет атрибуты 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(" "); 
    } 
});