javascript - 为什么我的带有事件处理程序的 addClass removeClass 不能按预期工作？

Question

jQuery 版本 1.6

目标:当用户点击向下箭头 (expander-down) 时，显示高级区域。同样，当用户点击上箭头 (expander-up) 时，隐藏高级区域。

问题:我认为使用下面的代码很容易实现。单击 expander-up 后，高级搜索区域按预期显示，但是当我单击 expander-down 时，没有任何反应。

仅供引用，我使用图像分割技术通过添加/删除类(扩展器向下、扩展器向上)来交换箭头的外观。

javascript:

$(".expander-down").unbind("click").click(function ()
{
   $(this).addClass("expander-up").removeClass("expander-down");
   $("#advanced-search").show();
});

$(".expander-up").unbind("click").click(function ()
{
   $(this).addClass("expander-down").removeClass("expander-up");
   $("#advanced-search").hide();
});

HTML

<a href='#'>
  <span class='expander-down'></span>
</a>

<div id='advanced-search'>advanced!</div>

Answer 1

因为分配给 click 处理程序的元素永远不会改变。即使当用户单击扩展器时，您也会在其上保留相同的处理程序(向下或向上)。

我会这样重构它:

$(".expander-down, .expander-up").click(function() {
    var $this = $(this);
    $this.toggleClass("expander-down expander-up");
    $("#advanced-search").toggle($this.hasClass("expander-down"));
    return false; // Stops propagation and prevents default action
});

通过切换向下/向上状态来响应点击，然后根据结果状态显示/隐藏搜索框。我认为当扩展器关闭时，您的代码会显示它，所以这就是我上面所做的，但这对我来说并不立即有意义。如果我误读了，只需将 hasClass 中的 expander-down 更改为 expander-up。