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 または買いの 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("&nbsp;");
    }
});

私ができるようにしたいのは、チェックボックスからファンド ID を取得し、同じファンド ID に関連付けられたラベルを見つけて、そのラベルの .html 属性を「S」に設定し、ご覧のように赤くすることです。下。これは可能ですか、それとも私の思考プロセスがうまくいかないだけですか? どんな助けでも大歓迎です。ありがとう、ニックG

4

2 に答える 2

1

カスタムdata-スタイル属性を使用して、チェックボックスの対応するラベルを検索する必要があります。この例では、各チェックボックスに data-fund-id 属性と data-label 属性があります。チェックボックスが変更されると、corect ラベル要素のテキストが data-fund-id によって検索され、(チェックボックスがチェックされている場合) そのテキストが 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 に答える