3

我有以下 html 文件：

<div id="tour">
 <h2>Paris, France Tour</h2>
 <p>$2,499 for 7 Nights</p>
 <button>See photos from our last tour</button>
 <ul class="photos">
   <li>
   <img src="/assets/photos/paris1.jpg">
   <span>Arc de Triomphe</span>
   </li>
   <li>
  <img src="/assets/photos/paris2.jpg">
  <span>The Eiffel Tower</span>
  </li>
  <li>
  <img src="/assets/photos/paris3.jpg">
  <span>Notre Dame de Paris</span>
  </li>
 </ul>
</div>

这是我的 jQuery 代码：

function showPhotos()
{
    $(this).find("span").slideToggle();
}

$(document).ready(function() { 
    $("#tour").on("click", "button", function() { 
        $(".photos").slideToggle();
    });

    $(".photos").on("mouseenter", "li", showPhotos);
    $('.photos').on("mouseleave", "li", showPhotos);
});

此代码有效，它显示了鼠标进入 img 元素时的跨度。但是当我尝试做同样的事情时：

function showPhotos()
{
    $(this).find("span").slideToggle();
}

$(document).ready(function() { 
    $("#tour").on("click", "button", function() { 
        $(".photos").slideToggle();
    });
    $(".photos").on("mouseenter", "li", function() {
        showPhotos();
    });
    $('.photos').on("mouseleave", "li", function() {
        showPhotos();
    });
});

它不起作用。以我有限的知识，两个代码似乎都在做同样的事情。请帮助我，第二个代码与第一个代码有何不同？

4

4 回答 4

10

第二个示例在函数中没有this上下文showPhotos()，您可以将元素作为参数传递：

function showPhotos(that)
{
    $(that).find("span").slideToggle();
}

$(document).ready(function() { 
  $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle();
  });
  $(".photos").on("mouseenter", "li", function() {
      showPhotos(this);
  });
  $('.photos').on("mouseleave", "li", function() {
      showPhotos(this);
  });
});

与问题无关，但一个小的改进是链接mouseleave事件，而不是再次重新选择.photos。

  $(".photos").on("mouseenter", "li", function() {
      showPhotos(this);
  }).on("mouseleave", "li", function() {
      showPhotos(this);
  });
于 2013-06-13T07:07:32.947 回答
2

当您showPhotos从匿名函数中调用该函数时，“this”并不是指处理事件的元素。所以你要么必须使用 MrCode 给出的解决方案，要么你也可以使用这样的东西：

$('.photos').on("mouseleave", "li", function() {
    showPhotos.apply(this,arguments);
});
于 2013-06-13T07:12:47.010 回答
0

在第二种情况下，而不是调用函数 showPhotos(); 里面

  $(".photos").on("mouseenter", "li", function() {
  });

编写函数的实际代码 i,e 

  $(this).find("span").slideToggle();

将工作。

于 2013-06-13T07:12:02.070 回答
0 
$(document).ready(function() { 
   $("#tour").on("click", "button", function() { 
        $(".photos").slideToggle();
   });
   $(".photos").on("mouseenter", "li", showPhotos);
   $('.photos').on("mouseleave", "li", showPhotos);
});

尝试这个。

于 2013-06-13T07:07:14.007 回答