Question

我有以下html，我想使用jQuery来切换product-preview-wrapper div中子div的显示/可见性。要通过从OPTION_one div中选择OPTION_two，OPTION_three或product-image-wrapper来选择要显示的内容，请执行此操作。另外，OPTION_one需要在运行时默认选择（隐藏STUFF_two和STUFF_three）。

<div class="product-preview-wrapper">
  <div id="wrap">STUFF_one</div>
  <div id="wrap">STUFF_two</div>
  <div id="wrap">STUFF_three</div>
</div>

<div class="product-image-wrapper">
  <div class="product-img-thumb-small">OPTION_one</div>
  <div class="product-img-thumb-small">OPTION_two</div>
  <div class="product-img-thumb-small">OPTION_three</div>
</div>

我知道有索引的东西，但我无法理解它。我还需要函数来允许不同数量的内容......不会总是有3个子div来切换。

我玩toggle，hide＆amp; show和css（'display'，'none'）并根据我的经验略微缩短。

我没有在这里发布我的试用代码，因为它不起作用，无论如何都是一团糟。

任何建议/方向都将非常感激。

C

Answer 1

不要对多个元素使用相同的id。 id 唯一！

修复后，请使用.index()：

$('.product-image-wrapper .product-img-thumb-small').click(function() {
  $('.product-preview-wrapper')
   .children()
   .eq($(this).index())
   .show()
   .siblings()
   .hide();
});

// To load the first one
$('.product-image-wrapper .product-img-thumb-small').eq(0).click();

Answer 2

切换应该有效。尝试将div显示设置为内联，然后使用切换。

用jquery切换div

2 个答案: