jQuery按位元素選擇

Question

也許我想這是錯誤的方式，但我試圖淡化我的頁面上的一些html元素，取決於通過同一頁上的複選框選擇的標誌。

我在頁面上有很多<div class"bar">。

每個欄的div將有一個 「issueflag」 - <div class"bar" data-issueflag="3">

的 「issueflag」 的價值將是一個按位值...

1 - 條碼問題 2 - 缺少數據 4 - 備註提交 ...添加等。

因此，例如，如果「issueflag」值爲3，則該條具有「Barcode Issues」和「Missing Data」。

我的頁面將有複選框，每個複選框都有一個標誌值。

當的複選框的狀態被修改，我想這不符合選擇淡出的元素，一個是那些做褪色。

希望這將有助於瞭解我米後...

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

Answer 1

試試這個：

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

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