Javascript “中的错误。”；。关于；jquery中的函数

我有以下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>

此代码有效，它显示鼠标进入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();
    });
});

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

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

---

试试这个。

第二个示例在

showPhotos（）函数中没有
this
上下文，您可以将元素作为参数传递：

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);
  });

在第二种情况下，不调用函数showPhotos（）；里面

编写函数的实际代码，即

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

将起作用。
当您从匿名函数中调用函数
showPhotos
时，“this”并不指处理事件的元素。因此，您要么使用MrCode提供的解决方案，要么也可以使用类似的解决方案：

$('.photos').on("mouseleave", "li", function() {
    showPhotos.apply(this,arguments);
});

try:$（“.photos”）.on（“mouseenter”，“li”，function（）{showPhotos（this）；}）；函数showPhotos（sender）{$（sender）.find（“span”）.slideToggle（）；}是问题的第一个示例。问题是为什么第一个示例有效而第二个示例无效。请使用可用的可能性来形成您的答案。e、 g用
`
包围代码，或用缩进将其写在新行中。这将使您的答案更容易阅读和理解。好的，那么您的意思是在字符串中编写函数的实际代码，因为“on”的第三个参数将起作用？请注意：为了两者之间完全相等，应该是
return showPhotos.apply（这是参数）
（这样，事件对象也作为参数传递，从回调返回
false
也可以）谢谢。我以前不知道申请方法，非常感谢。因此，在第一个示例中，“this”上下文是可用的。我有点困惑，你能解释一下它是如何用于第一个示例的吗？是的，在第一个示例中，当你直接指定
showPhotos（）
作为单击处理程序时，函数的
this
将设置为被单击的元素的值。这是因为浏览器将元素作为
this
传递到根单击处理程序中。在第二个示例中，root click处理程序是匿名函数，因此
showPhotos（）
不会获取
this
上下文，除非像示例中那样传入它。在第一个示例中，
showPhotos（）
是根点击处理程序，因此它获取上下文。啊，现在我想我明白了。谢谢你的耐心。
  $(this).find("span").slideToggle(); 

$('.photos').on("mouseleave", "li", function() {
    showPhotos.apply(this,arguments);
});