JQuery悬停切换相关选择器

Question

我有一个图像列表和单独的列表，其中每个项目都与一个图像相关。有没有可能有一个悬停事件，使用JQuery淡入淡出相关图像？例如，当您将鼠标悬停在listid-1上时，image-1会淡入。

这是我能做的最好的事情：

​

$(document).ready(function(){
  $( ".options li" ).hover(function( event ) {
    $('.image-' + (this - ".listid")).toggleFade( "300" );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image-1' src='1.jpg'>
    <img class='image-2' src='2.jpg'>
    <img class='image-3' src='3.jpg'>
    <img class='image-4' src='4.jpg'>
    <img class='image-5' src='5.jpg'>
  </div>
  <div class="options">
    <nav>
      <ul>
        <li class='listid-1'>One</li>
        <li class='listid-2'>Two</li>
        <li class='listid-3'>Three</li>
        <li class='listid-4'>Four</li>
        <li class='listid-5'>Five</li>
      </ul>
    </nav>
  </div>
</div>

​

Answer 1

你可以获取当前li的类，并在-上进行拆分，以获得number并将其用作图像的选择器。

​

$('img').hide()

$(".options li").hover(function() {
  $('.image-' + ($(this).attr('class').split('-')[1])).fadeToggle("300");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image-1' src='1.jpg' alt="1">
    <img class='image-2' src='2.jpg' alt="2">
    <img class='image-3' src='3.jpg' alt="3">
    <img class='image-4' src='4.jpg' alt="4">
    <img class='image-5' src='5.jpg' alt="5">
  </div>
  <div class="options">
    <nav>
      <ul>
        <li class='listid-1'>One</li>
        <li class='listid-2'>Two</li>
        <li class='listid-3'>Three</li>
        <li class='listid-4'>Four</li>
        <li class='listid-5'>Five</li>
      </ul>
    </nav>
  </div>
</div>

​

如果您对图像有多个类，则可以使用data属性来选择图像。

​

$('img').hide()

$(".options li").hover(function() {
  $('img.image-' + $(this).data('img')).fadeToggle(300)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image-1' src='1.jpg' alt="1">
    <img class='image-2' src='2.jpg' alt="2">
    <img class='image-3' src='3.jpg' alt="3">
    <img class='image-4' src='4.jpg' alt="4">
    <img class='image-5' src='5.jpg' alt="5">
  </div>
  <div class="options">
    <nav>
      <ul>
        <li data-img="1" class='listid-1'>One</li>
        <li data-img="2" class='listid-2'>Two</li>
        <li data-img="3" class='listid-3'>Three</li>
        <li data-img="4" class='listid-4'>Four</li>
        <li data-img="5" class='listid-5'>Five</li>
      </ul>
    </nav>
  </div>
</div>

​

Answer 2

你有几个问题。首先，将this引用与字符串连接起来不会得到有效的选择器。其次，方法名是fadeToggle()，而不是toggleFade()。

要解决这些问题，您可以首先对li和img元素进行分组，为它们提供相同的相应类，然后通过它们的索引将悬停的li与img关联起来，如下所示：

​

$(document).ready(function() {
  $(".options .listid").hover(function(event) {
    $('.image').eq($(this).index()).fadeToggle("300");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='images'>
    <img class='image' src='1.jpg'>
    <img class='image' src='2.jpg'>
    <img class='image' src='3.jpg'>
    <img class='image' src='4.jpg'>
    <img class='image' src='5.jpg'>
  </div>
  <div class="options">
    <nav>
      <ul>
        <li class='listid'>One</li>
        <li class='listid'>Two</li>
        <li class='listid'>Three</li>
        <li class='listid'>Four</li>
        <li class='listid'>Five</li>
      </ul>
    </nav>
  </div>
</div>

​