javascript – jquery中“.on”函数出错

我有以下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",showPhotos);
});

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

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

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

它不起作用.由于我的知识有限,两个代码似乎都在做同样的事情.请帮帮我,第二个代码与第一个代码有什么不同？

解决方法

第二个例子在showPhotos()函数中没有这个上下文,你可以将元素作为参数传递：

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

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

与此问题无关,但稍微改进的是链接mouseleave事件,而不是再次重新选择.photos.

$(".photos").on("mouseenter",function() {
      showPhotos(this);
  }).on("mouseleave",function() {
      showPhotos(this);
  });

javascript – jquery中“.on”函数出错

解决方法

猜你在找的jQuery相关文章