【问题标题】：Display only one div and hide the rest using index仅显示一个 div 并使用 index 隐藏其余部分
【发布时间】：2014-09-27 13:43:26
【问题描述】：

我想要一个函数，它将 fadeIn() 一个带有类图像的 div 悬停在另一个类上。但是，每个类都有多个 div，并且希望每个 div 对应于另一个。我没有考虑过使用 index() 来获取每个类的 inex 编号，然后等于每个索引编号以仅显示对应的一个。

为了澄清，我将其表示为代码：

   <div class="container">
        <div class="woot"></div>
        <div class="woot"></div>
        <div class="woot"></div>
        <div class="woot"></div>
        <div class="woot"></div>
    </div>
    <div class="img_container">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
    </div>

这个想法是，当悬停第一个 woot div 时，它将显示第一个图像 div，如果悬停第二个，它将显示第二个，其余的过程相同。

【问题讨论】：

hover 是什么意思？只要鼠标悬停就显示？
是的，我的意思是鼠标悬停在 div 上时显示。
@LcLk 我所尝试的几乎没什么，我对 JavaScript 的经验不是很丰富，但我猜它会那样做。

标签： javascript jquery html css

【解决方案1】：

<div class="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

//use css selection in jquery


 $('container span:nth-child(1))
 $('container span:nth-child(2))
 $('container span:nth-child(3))
 $('container span:nth-child(4))


I hope this will help you.

【讨论】：

【解决方案2】：

试试下面的代码：

$(document).ready(function() {
  $(".woot").hover(
    function() {
      $(".image:eq(" + $(this).index() + ")").show();
    },
    function() {
      $(".image:eq(" + $(this).index() + ")").hide();
    }
  );
});

.woot {
  width: 100px;
  height: 100px;
  background-color: black;
}
.image {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: none;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="woot"></div>
  <div class="woot"></div>
  <div class="woot"></div>
  <div class="woot"></div>
  <div class="woot"></div>
</div>
<div class="img_container">
  <div class="image">1</div>
  <div class="image">2</div>
  <div class="image">3</div>
  <div class="image">4</div>
  <div class="image">5</div>
</div>

【讨论】：

【解决方案3】：

使用此解决方案，您必须将所有 .img_container div 设置为 display:none。

CSS

.img_container div{display:none;}

jQuery

$('.container div').on('mouseenter', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).show();

})

$('.container div').on('mouseleave', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).hide();

})

JSFIDDLE：http://jsfiddle.net/sz7am8Lt/.

使用此解决方案，您必须将所有 .img_container div 设置为 visibility:hidden。

CSS

.img_container div{visibility:hidden;}

jQuery

$('.container div').on('mouseenter', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).css('visibility','visible');

})

$('.container div').on('mouseleave', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).css('visibility','hidden');

})

JSFIDDLE：http://jsfiddle.net/sz7am8Lt/1/.

【讨论】：