0

クラス「rocksMenu_zoomContainer」（兄弟ではない）の5つの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()は、クリック (ボタン) で実行されます。

これは問題なく動作します。問題は、1 つが常に表示され、他のすべてが常に非表示であるという規則に従っています。

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

ボタンをクリックすると、対応する div が表示されますが、他のすべては表示されたままです。私はこれを理解することはできません.siblings（）を使用しますが、兄弟ではありません...

ペドロ

4

4 に答える 4

1

次のことを試してください。

function zoomContainers_showHide(){
   $(".rocksMenu_zoomContainer:visible").hide();
   $(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}
于 2013-04-24T11:58:34.903 に答える