1

私がやりたいことは次のとおりです。

  • 7 つの数字と 7 つの div があり、それらは互いにリンクされています (nr 0 は div 0 と関係があります)
  • 数字の1つがクリックされると、選択されていない他のすべてのdivが折りたたまれます
  • 一度に複数選択可能

要約すると、基本的に、ページには数字と 7 つの div を含むいくつかのラベルがあり、これらはすべてデフォルトで表示されます (div) が、数字をクリックしてそれらの 1 つ以上を選択すると、ページには選択した div のみが表示されます。 .

これは私がやろうとしてきたことです：

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

詳細コード: http://jsfiddle.net/LSjg4/

4

5 に答える 5

1

あなたのコードのいくつかを修正しました。これは、以下の作業コードと jsfiddle でのリンクです。

データ型の不一致 (string と 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 
<!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 に答える