0

おそらく私はこれについて間違った方法で考えていますが、同じページのチェックボックスで選択されたフラグに応じて、ページのいくつかの html 要素をフェードアウトしようとしています。

ページにたくさん<div class"bar">あります。

これらのバー div のそれぞれに「issueflag」があります -<div class"bar" data-issueflag="3">

「issueflag」の値は、ビットごとの値になります...

1 - バーコードの問題 2 - データの欠落 4 - 提出されたメモ ...などを追加します。

たとえば、「issueflag」の値が 3 の場合、バーには「バーコードの問題」と「欠落データ」があります。

私のページにはチェックボックスがあり、それぞれにフラグの値があります。

チェックボックスの状態が変更されると、選択に一致しない要素がフェードアウトし、フェードインする要素が欲しいです。

うまくいけば、これは私が求めているものを理解するのに役立ちます...

http://jsfiddle.net/ETFairfax/Bj4Vb/

私の質問は、jQuery でビット単位の選択を行うにはどうすればよいですか?

どんな助けでも感謝します。

マークアップ

<h3>Make your selection</h3>

<input type="checkbox" id="checkboxBarcode" value="1" />Barcode Issue (1)
<br/>
<input type="checkbox" id="checkboxInputMissing" value="2" />Missing Input (2)
<br/>
<input type="checkbox" id="checkboxNotesSubmitted" value="4" />notes Submitted (4)
<br/>

<h3>Results</h3>

<div id="container">
    <div class="bar issueflags1" data-issueflag="1">1</div>
    <div class="bar issueflags2" data-issueflag="2">2</div>
    <div class="bar issueflags4" data-issueflag="4">4</div>
    <div class="bar issueflags7" data-issueflag="7">7</div>
</div>

JavaScript/jQuery

$("input:checkbox").click(function () {

    var selectionSum = 0;

    $("input:checkbox:checked").each(function () {
        selectionSum += parseInt($(this).val(), 10);
    });

    var $bars = $("#container .bar");

    $bars.fadeTo("fast", 1, function () {

        if (selectionSum != 0) {

            // This is wrong, but shows how I would like the UI to sort of behave (some fine tuning needed!)...
            $bars.not(".issueflags" + selectionSum).fadeTo("slow", 0.5);

            // I need something along the lines of a c#/linq query like:
            // $("#container .bar").where(b => b.issueflag & selectionSum == 0).fadeTo("slow", 0.5);
        }
    });
});

CSS

#container {
    width: 300px;
    height: 300px;
}
.bar {
    margin-top: 10px;
    background-color: YellowGreen;
}
4

1 に答える 1

0

これを試して：

$bars.filter(function() {
   return (parseInt($(this).attr('data-issueflag')) & selectionSum) === 0;
}).fadeTo("slow", 0.5);

http://jsfiddle.net/Bj4Vb/1/

于 2013-11-25T12:24:26.850 に答える