在jquery中根据索引显示和隐藏元素

Question

我试图在jquery中显示基于index的div：

我有这样的元素：

$('#prod_thumb li').hover(function() {

  var idx = $('#prod_thumb li').index(this);
  console.log('clicked index', idx);

  $('.product-single__photos div:nth-child(1)').hide();
  $('.product-single__photos div').eq(idx).show();

}, function() {
  var idx = $('#prod_thumb li').index(this);
  $('.product-single__photos div').eq(idx).hide();
  $('.product-single__photos div:nth-child(1)').eq(idx).show();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dflex" id="prod_thumb">

  <li class="">
    <div data-image-id="27745498387" href="" class="product-single__thumbnail">
      <img class="product-single__thumb" src="" alt="Loaded">
    </div>
  </li>

  <li class="">
    <div data-image-id="27745506259" href="" class="product-single__thumbnail">
      <img class="product-single__thumb" src="" alt="Loaded">
    </div>
  </li>

  <li class="">
    <div data-image-id="27745515027" href="" class="product-single__thumbnail">
      <img class="product-single__thumb" src="" alt="Loaded">
    </div>
  </li>

</ul>


<div class="product-single__photos">

  <div class="product-single__photo-wrapper">
    <img class="product-single__photo" id="ProductPhotoImg" src="" alt="Loaded" data-image-id="27745498387">
  </div>

  <div class="product-single__photo-wrapper">
    <img class="product-single__photo" src="" alt="Loaded" data-image-id="27745506259">
  </div>

  <div class="product-single__photo-wrapper">
    <img class="product-single__photo" src="" alt="Loaded" data-image-id="27745515027">
  </div>

</div>

我想显示div我点击并隐藏其他内容。我该怎么做？现在我只能在回调函数中隐藏一个图像。

Answer 1

您应该使用.siblings()来选择所有其他元素。

$('#prod_thumb li').hover(function(){
  var idx = $('#prod_thumb li').index(this);
  $('.product-single__photos div').eq(idx).show().siblings().hide();
}, function(){
  $('.product-single__photos div').show().slice(1).hide();
}).first().trigger('mouseover');

ul {padding: 0;margin: 0;}
ul li {display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dflex" id="prod_thumb">

    <li class="">
        <div data-image-id="27745498387" href="" class="product-single__thumbnail">
            <img class="product-single__thumb" src="//placehold.it/30&text=first" alt="Loaded">
        </div>
    </li>

    <li class="">
        <div data-image-id="27745506259" href="" class="product-single__thumbnail">
            <img class="product-single__thumb" src="//placehold.it/30&text=second" alt="Loaded">
        </div>
    </li>

    <li class="">
        <div data-image-id="27745515027" href="" class="product-single__thumbnail">
            <img class="product-single__thumb" src="//placehold.it/30&text=third" alt="Loaded">
        </div>
    </li>

</ul>

<div class="product-single__photos">

    <div class="product-single__photo-wrapper">
        <img class="product-single__photo" id="ProductPhotoImg" src="//placehold.it/300x100&text=first" alt="Loaded" data-image-id="27745498387">
    </div>

    <div class="product-single__photo-wrapper">
        <img class="product-single__photo" src="//placehold.it/300x100&text=second" alt="Loaded" data-image-id="27745506259">
    </div>

    <div class="product-single__photo-wrapper">
        <img class="product-single__photo" src="//placehold.it/300x100&text=third" alt="Loaded" data-image-id="27745515027">
    </div>

</div>