Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

要解决问题，您可以先将li和img元素分别给予相同的相应类别，然后将悬停的li与img相关联。他们的索引，如下：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以获取当前li的课程，并在-分割以获取数字，并将其用作图片的选择器。

$('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>

JQuery悬停切换相关选择器

2 个答案: