CODEWITHSUNDEEP
jqueryfindcustom-attributesattr
Nick G
Nick G

Reputation: 1229

find element by attribute, set different attribute of the found element

this might be confusing to others, as it is to me, but I was wondering if I could use jquery to find an element based on a unique attribute value and then set the value of a different attribute. Basically i'm trying to make a static page seem dynamic through custom attributes.

Some html is;

<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>

I have set the "fund-id" attribute to "1" to show that all of these are connected for 1 record, subsequent records will be 2, 3, 4 etc..

I have a function where depending on the checkbox that is checked I will display an S for Sell or a B for Buy in the label above. My function looks like this;

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

What I want to be able to do is take the fund-id from the checkbox, find the label with the same associated fund-id and set just that labels .html attribute to be an "S" and to be red as you can see below. Is this possible or am I just out of whack with my thought process? any help is greatly appreciated. Thank you, NickG

Upvotes: 1

Views: 1828

Answers (2)

Nick G
Nick G

Reputation: 1229

I think I figured it out using the following code;

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

Upvotes: 0

colestrode
colestrode

Reputation: 10658

You'll want to make use of custom data- style attributes to look up the checkbox's corresponding label. In this example, each checkbox has data-fund-id and data-label attributes. When the checkbox is changed, the text of the corect label element is looked up by data-fund-id and (if the checkbox is checked) it's text is set to the data-label value.

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

Upvotes: 1

Related Questions