0
也许我想这是错误的方式,但我试图淡化我的页面上的一些html元素,取决于通过同一页上的复选框选择的标志。jQuery按位元素选择
我在页面上有很多<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;
}
非常感谢,这似乎工作一种享受 - 欢呼声。 – ETFairfax
没问题,很乐意帮忙。 – sroes