5 divs，同一類，顯示一個 - 隱藏其他人（不是兄弟姐妹）

Question

我有5個類與「rocksMenu_zoomContainer」（不是兄弟姐妹）的div。我使用下面的代碼：

function zoomContainers_showHide(){ 
if(menuItem_place === 0){ 
    $("#granitos_zoomContainer").show(); 
} 
else if(menuItem_place === 1){ 
    $("#marmores_zoomContainer").show(); 
} 
else if(menuItem_place === 2){ 
    $("#calcarios_zoomContainer").show(); 
} 
else if(menuItem_place === 3){ 
    $("#compositos_zoomContainer").show(); 
} 
else if(menuItem_place === 4){ 
    $("#ardosias_zoomContainer").show(); 
} 

}

此功能zoomContainers_showHide（）在點擊（按鈕）執行。

這工作正常，問題是遵循規則一個總是可見的，所有其他人總是隱藏。

HTML標記：

<!-- Granitos --> 

      <div id="rocksMenu_granitos" class="menuItem"> 
      <div id="granitos_zoomContainer" class="rocksMenu_zoomContainer"></div> 
      <div id="rocksMenu_granitos_subContainer" class="menuItem_subContainer"> 
       <img id="granitos" class="rocksMenu_image" src="images/rocksMenu_granitos.png" alt="" /> 
      </div> 
      </div> <!-- End of id="rocksMenu_granitos" --> 

<!-- Mármores --> 

      <div id="rocksMenu_marmores" class="menuItem"> 
      <div id="marmores_zoomContainer" class="rocksMenu_zoomContainer"></div> 
      <div id="rocksMenu_marmores_subContainer" class="menuItem_subContainer"> 
       <img id="marmores" class="rocksMenu_image" src="images/rocksMenu_marmores.png" alt="" /> 
      </div> 
      </div> <!-- End of id="rocksMenu_marmores" --> 

<!-- Calcários --> 

      <div id="rocksMenu_calcarios" class="menuItem"> 
      <div id="calcarios_zoomContainer" class="rocksMenu_zoomContainer"></div> 
      <div id="rocksMenu_calcarios_subContainer" class="menuItem_subContainer"> 
       <img id="calcarios" class="rocksMenu_image" src="images/rocksMenu_calcarios.png" alt="" /> 
      </div> 
      </div> <!-- End of id="rocksMenu_calcarios" --> 

<!-- Compósitos --> 

      <div id="rocksMenu_compositos" class="menuItem"> 
      <div id="compositos_zoomContainer" class="rocksMenu_zoomContainer"></div> 
      <div id="rocksMenu_compositos_subContainer" class="menuItem_subContainer"> 
       <img id="compositos" class="rocksMenu_image" src="images/rocksMenu_compositos.png" alt="" /> 
      </div> 
      </div> <!-- End of id="rocksMenu_compositos" --> 

<!-- Ardósias --> 

      <div id="rocksMenu_ardosias" class="menuItem"> 
      <div id="ardosias_zoomContainer" class="rocksMenu_zoomContainer"></div> 
      <div id="rocksMenu_ardosias_subContainer" class="menuItem_subContainer"> 
       <img id="ardosias" class="rocksMenu_image" src="images/rocksMenu_ardosias.png" alt="" /> 
      </div> 
      </div> <!-- End of id="rocksMenu_compositos" --> 

我按一下按鈕，它顯示了相應的格但其餘的人仍然可見。我不知道這一個了 - 我會用兄弟姐妹（），但他們沒有兄弟姐妹......

佩德羅

Answer 1

我認爲這會工作

function zoomContainers_showHide(){ 
$(".rocksMenu_zoomContainer:visible").hide(); 
$(".rocksMenu_zoomContainer").eq(menuItem_place).show(); 
} 

Answer 2

此功能將隱藏所有的菜單，然後顯示一個在menuItem_place：

function zoomContainers_showHide(){  
    $(".rocksMenu_zoomContainer").hide(); 
    $(".rocksMenu_zoomContainer:eq(" + menuItem_place +")").show(); 
} 

Answer 3

爲什麼不隱藏所有他們，然後顯示你想要顯示的那個？這都將是太快，用戶看到的差別反正...

function showZoomContainer(id) { 
    $('.menuItem').hide(); // use slide-up or whatever if you need something else. 
          // it won't matter for already hidden divs 
    $('#' + id).show(); // or slide-down, or watever 
} 

使用像這樣：

// show compositos, hide all others: 
showZoomContainer('rocksMenu_compositos'); 

Answer 4

請嘗試以下：

function zoomContainers_showHide(){ 
    $(".rocksMenu_zoomContainer:visible").hide(); 
    $(".rocksMenu_zoomContainer").eq(menuItem_place).show(); 
}