所有我想要做的是：效果基本show（）中的所有元素，而不選擇那些
綜上所述，基本上，頁面有一些帶有數字和7個div的標籤h都默認顯示（div），但是當它們中的一個或多個通過點擊數字來選擇時，頁面應該只顯示選定的div。
這是我一直在努力做的事情：
for(var i = 0; i <= 6; i++) {
if(i != (floors[i])) {
$("#lvl" + floors[i]).slideUp();
}
}
更多代碼： http://jsfiddle.net/LSjg4/
我更正了你的代碼中的一些東西。這裏是下面的工作代碼，並在jsfiddle中鏈接到它。
存在數據類型不匹配（比較字符串和整數）。當匹配它是否存在於樓層陣列中時，代碼僅檢查樓層[i]，而我可以是樓層中的任何位置。
var floors = [];
$(".nr").click(function() {
var state = $(this).data('state');
state = !state;
if (state) {
$(this).css("background-color", "#1b7664");
$(this).css("border-color", "#236959");
floors.push(parseInt($(this).text()));
console.log(floors);
for(var i = 0; i <= 6; i++) {
ret = $.inArray(i, floors);
if(ret==-1) {
$("#lvl" + i).slideUp();
}
else {
$("#lvl" + i).slideDown();
}
}
} else {
$(this).css("background-color", "#02c099");
$(this).css("border-color", "#13a480");
for (var i = 0; i < floors.length; i++) {
if (floors[i] == parseInt($(this).text()))
floors.splice(i, 1);
}
for(var i = 0; i <= 6; i++) {
ret = $.inArray(i, floors);
if(ret==-1) {
$("#lvl" + i).slideUp();
}
else {
$("#lvl" + i).slideDown();
}
}
}
$(this).data('state', state);
});
這實際上是我在找的，謝謝！ – Xmsss
@Xmsss你檢查了我的答案，它提供了相同的功能，代碼少得多 –
試試這個
$(".nr").click(function() {
//alert($(this).attr("data-select"));
if($(this).attr("data-select") === "1") {
$(this).attr("data-select","0");
} else {
$(this).attr("data-select","1");
}
$(".nr").each(function(){
if($(this).attr("data-select") === "1") {
var id = $(this).text();
$("div#lvl"+id).slideDown();
} else {
var id1 = $(this).text();
$("div#lvl"+id1).slideUp();
}
});
});
我相信這是什麼你正在尋找：
$(".nr").click(function() {
$(this).toggleClass('selected');
$('.nr').each(function(){
var $target = $('#lvl'+$(this).text());
if($(this).is('.selected'))
$target.slideDown();
else
$target.slideUp();
});
});
注意，而不是改變CSS屬性我建立了一個類所選擇的元素
嘗試
var floors = [];
var $lvls = $('.lvl'), $nrs = $(".nr");
$nrs.click(function() {
var $nr = $(this), index = $nrs.index($nr), $lvl = $lvls.eq(index);
$lvl.add($nr).toggleClass('active');
if($nr.hasClass('active')){
$lvls.not('.active').slideUp();
$lvl.slideDown();
$nr.css("background-color", "#1b7664");
$nr.css("border-color", "#236959");
floors.push(($nr).text());
} else {
$nr.css("background-color", "#02c099");
$nr.css("border-color", "#13a480");
if($nrs.filter('.active').length == 0){
$lvls.slideDown();
} else {
$lvls.not('.active').slideUp();
}
var text = $nr.text();
floors.splice($.inArray(text, floors), 1);
}
console.log('floors', JSON.stringify(floors))
});
演示：Fiddle
這是一個很好的答案，但取消選擇元素後，必須再次顯示它們（所有屬於數字的div）。 – Xmsss
@Xmsss取消選擇所有元素後？ –
@Xmsss查看更新http://jsfiddle.net/arunpjohny/CT2Gh/2 –
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideUp demo</title>
<style>
.norm { background:#cccccc; margin:3px; width:80px;height:40px; float:left;color:#000000 }
.faded { background:#ffffff; margin:3px; width:80px;height:40px; float:left;color:#ffffff }
.btn{width:80px;}
</style>
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
</head>
<body>
<button class="btn" onClick="show(1)">1</button>
<button class="btn" onClick="show(2)">2</button>
<button class="btn" onClick="show(3)">3</button>
<button class="btn" onClick="show(4)">4</button>
<button class="btn" onClick="reset()">Reset</button>
<div class="norm" id="slide1">1</div>
<div class="norm" id="slide2">2</div>
<div class="norm" id="slide3">3</div>
<div class="norm" id="slide4">4</div>
<div></div>
<script>
var save = new Array();
function show(indx){
if($.inArray(indx, save)==-1){
save.push(indx);
for(var i=0;i<5;i++){
if($.inArray(i, save)==-1){
$('#slide'+i).attr('class','faded');
}
else{
$('#slide'+i).attr('class','norm');
}
}
}
}
function reset(){
save = new Array();
for(var i=0;i<5;i++){
$('#slide'+i).attr('class','norm');
}
}
</script>
</body>
</html>
u能解釋更準確寺是U想達到什麼目的？ –
我有7個數字（7跨度）和7個divs。如果我點擊一個數字，我想要顯示屬於數字x的div（如果不是），並摺疊所有未選中的其他div。 – Xmsss
如此完全相反的笏現在是?? –