Question

我想做的就是：

有7个数字和7个div，它们相互链接（nr 0与div 0的关系）
当单击其中一个数字时，它应该折叠所有未选中的其他div
可以一次选择更多

总而言之，页面上有一些带有数字和7个div的标签，这些标签都是默认显示的（div），但是当通过点击数字选择其中一个或多个时，页面应该只显示选择的div。

这就是我一直在尝试做的事情：

for(var i = 0; i <= 6; i++) {     
            if(i != (floors[i])) {
                $("#lvl" + floors[i]).slideUp();
            }
        }

更多代码： http://jsfiddle.net/LSjg4/

Answer 1

尝试

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

Answer 2

我在代码中更正了一些内容。以下是jsfiddle中的以下工作代码和链接。

存在数据类型不匹配（比较字符串和整数）。当匹配是否存在于楼层数组中时，代码仅检查floor [i]，而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);
    });

在此演示：http://jsfiddle.net/bFe9T/

Answer 3

试试这个

$(".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();
        }
    });
});

FIDDLE

Answer 4

我相信这就是你要找的东西：

$(".nr").click(function () {
    $(this).toggleClass('selected');
    $('.nr').each(function(){
        var $target =  $('#lvl'+$(this).text());
        if($(this).is('.selected'))
            $target.slideDown();
        else
            $target.slideUp();
    });
});

请注意，我没有更改CSS属性，而是为所选元素设置了一个类

<强> Demo fiddle

Answer 5

<!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>

slideUp（）所有元素，但不是所选元素

5 个答案: