jQuery的嵌套$。每個顯示和隱藏元素（DIV）基於參數

我盡力去完成，當我在點擊鏈接只有一些與ID秀「的div」元素和其他仍然隱藏。

arrValues只能包含0和1值以及
0 elementId需要是隱藏=的CSS（ '顯示'， '無'）
1 elementId需要被示出=的CSS（ '顯示'，'塊「）

 <!-- Box 1 --> 
     <div id="panelSomeName1" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#1">Box 1</a></h4> 
      </div> 
      <div id="1" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 2 --> 
     <div id="panelSomeName2" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#2">Box 2</a></h4> 
      </div> 
      <div id="2" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 3 --> 
     <div id="panelSomeName3" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#3">Box 3</a> 
       </h4> 
      </div> 
      <div id="3" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 4 --> 
     <div id="panelSomeName4" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#4">Box 4</a> 
       </h4> 
      </div> 
      <div id="4" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 5 --> 
     <div id="panelSomeName5" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#5">Box 5</a> 
       </h4> 
      </div> 
      <div id="5" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 6 --> 
     <div id="panelSomeName6" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#6">Box 6</a></h4> 
      </div> 
      <div id="6" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 

       </div> 
      </div> 
     </div> 

     <!-- Box 7 Box --> 
     <div id="panelSomeName7" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#7">Box 7</a></h4> 
      </div> 
      <div id="7" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 8 --> 
     <div id="panelSomeName8" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#8">Box 8</a> 
       </h4> 
      </div> 
      <div id="mb8" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

    </div> 
</div>

 
    $('#showOptions').on("click", function (e) { 

var arrValues = '11110001'.split(''); 

    $.each(arrValues, function (intIndex, objValue) { 

     $("#panelBoxOptions").children("div").each(function() { 
     var _id = "#" + $(this).attr("id"); 

     console.log(intIndex +" " +_id + " " + objValue); 

     var dsplHide = (objValue != 0) ? $(_id).css('display', 'block') : $(_id).css('display', 'none'); 


     }); 
    }); 

    $('#panelBoxOptions').css('display', 'block');

}）;

因此，這是正確的嵌套結構，我要跟着來解決這個問題？

謝謝。

I make a working example on jsfiddle

來源

2016-05-07 user1657904

它看起來像你有另一個循環的內部循環（each）（因此如此多的線沒有顯示在控制檯日誌，而不是僅僅八），而似乎導致所有的值回到1. This fiddle似乎通過去除環繞在arrValues的一部分，而不是問如果當前的div intIndex是arrValues 1或0的工作。相關更改：

// .... 
var arrValues = '11110001'.split(''); 
$("#panelBoxOptions").children("div").each(function (intIndex) { 
    var _id = "#" + $(this).attr("id"); 
    var whichValue = arrValues[intIndex]; 
    var dsplHide = (whichValue != 0) ? $(_id).css('display', 'block') : $(_id).css('display', 'none'); 
}); 
// ....

來源

2016-05-07 17:01:40

我覺得在我的小提琴中，我更改了一些ID值，因爲它們是以數字開頭的，而這些數字是他們不應該使用的。我不知道這是否影響了功能，但我認爲我應該提及它以防萬一。 –

這很有道理，我太複雜了。這項工作就像一個魅力。謝謝Max – user1657904

jQuery的嵌套$。每個顯示和隱藏元素（DIV）基於參數

回答

相關問題