1

我想做的就是：

  • 有 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/

4

5 回答 5

2

尝试

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

演示：小提琴

于 2013-08-23T07:30:59.360 回答
1

我更正了您代码中的一些内容。这是下面的工作代码并在 jsfiddle 中链接到它。

存在数据类型不匹配（比较字符串和 int）。当匹配它是否存在于楼层数组中时，代码仅检查楼层[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/

于 2013-08-23T09:06:19.907 回答
0

我相信这就是您正在寻找的：

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

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

演示小提琴

于 2013-08-23T07:28:39.260 回答
0 
<!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>
于 2013-08-23T07:45:54.907 回答
0

尝试这个

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

小提琴

于 2013-08-23T07:27:08.507 回答