javascript - 尝试切换面板，同时将图标更改为 'view more' 和 'view less'

Question

我刚刚开始学习 jQuery/javascript，所以这似乎是一个非常基本的问题，但它仍然让我烦恼。

我有一个 6 人小组 <li>其中 3 个是隐藏的，直到单击“查看更多”链接，此时面板会切换以显示其他 3 个。图标从“更多”更改为“更少”，但随后不会变回“更多” 。谁能看出代码中的问题吗？

任何帮助将不胜感激:)

谢谢，大卫

$(document).ready(function() {
  $('.allApps').hide();
  $('.moreAppsIcon').click(function() {
    $('.moreAppsIcon').removeClass("moreAppsIcon").addClass("lessAppsIcon");
    $(this).toggleClass("active");
    $('.allApps').slideToggle("slow");
    return false;
  });

  $('.lessAppsIcon').click(function() {
    $('.appsMore').slideToggle("slow", function () {
      $('.appsMore').removeClass("appsMore").addClass("moreAppsIcon");
      $(this).toggleClass("active");
      return false;
    });                             
  });
});

Answer 1

使用更方便.live()在这里，像这样:

$('.moreAppsIcon').live('click', function() {
//and...
$('.lessAppsIcon').live('click', function() {

否则你的函数没有正确绑定(bind)。例如，$('.lessAppsIcon') 查找当时具有该类的元素，并将click 处理程序绑定(bind)到它们...元素得到该类稍后不会获得该 click 处理程序，而 .live() 在事件发生时作用于元素的选择器，获得您想要的结果。

所以基本上，您附加了 n 个事件处理程序，每个最初匹配的元素都有一个事件处理程序...当您执行 .addClass() 时其他元素不会突然获得该事件处理程序，它位于您最初找到的 DOM 元素上，而不是在其他元素更改类时动态添加到其他元素。同样的原因.removeClass()不会删除事件处理程序。但是，如果您使用 .live()像上面一样，它将具有像您一样更改事件处理程序的效果。