Question

我有一些按钮，当点击时，调用jQuery来删除和替换他们的类。我想调用的jQuery.mouseover事件忽略了被操纵的类，并且只遵守页面加载中的类。

的示例

以下详细信息：

我有一行按钮，当滚动时调用一些jQuery来向页面上其他位置的对象添加.highlighted类：

以下是HTML示例：

<ul id="portfolioLinks">
    <li class="activeButton kittens"><a class="kittens" href="#"></a></li>
    <li class="activeButton otters"><a class="otters" href="#"></a></li>
    <li class="depressed donkey"><a class="donkey" href="#"></a></li>
</ul>

和相应的jQuery代码：

var selectedType = '.' + $(this).attr('class');


$("li.activeButton a").mouseenter(function() {

    var selectedType = '.' + $(this).attr('class');

    $("div.pageContent div" + selectedType).addClass('highlighted');

});     

$("#portfolioLinks a").mouseleave(function() {

    $("div.pageContent div").removeClass('highlighted');

});

这适用于页面加载的静态内容，但是当我点击一个按钮时，我得到了 jQuery将.depressed类添加到$(this)并提供所有其他.activeButton：

$("#portfolioLinks a").click(function() {


    $("#portfolioLinks li").addClass('activeButton').removeClass('depressed');

    $(this).parent().removeClass('activeButton').addClass('depressed');

//do some other stuff

});

但是，它似乎完全忽略了更改的类，并继续突出显示与缺少.activeButton类的按钮匹配的div。

我昨晚花了大部分时间，今天早上试图解决这个问题。我已经尝试了各种.not s，:not和if s，现在我已经完全迷失了。

非常感谢任何指导。

Answer 1

在此处使用.delegate()，如下所示：

$("#portfolioLinks").delegate("li.activeButton a", {
   mouseenter: function() {
    var selectedType = '.' + $(this).attr('class');
    $("div.pageContent div" + selectedType).addClass('highlighted');
  },
  mouseleave: function() {
    $("div.pageContent div").removeClass('highlighted');
  });

Here's your fiddle updated with the above code, working

问题在于，当您执行$("li.activeButton a")时，您没有将任何内容绑定到类，而是将事件绑定到您使用找到的元素类运行时 ... 元素现在绑定了事件处理程序。未来的任何变化都是无关紧要的，处理程序是受约束的。

但是，对于.live()和.delegate()，当事件发生时，选择器会被检查，因此确实该类已更改。作为奖励，它对许多元素来说也更便宜，因为在#portfolioLinks上有一个处理程序集。

如果使用早于1.4.3的jQuery，您将需要非地图表单，如下所示：

$("#portfolioLinks").delegate("li.activeButton a", "mouseenter", function() { var selectedType = '.' + $(this).attr('class'); $("div.pageContent div" + selectedType).addClass('highlighted'); }).delegate("li.activeButton a", "mouseleave", function() { $("div.pageContent div").removeClass('highlighted'); });

jQuery选择器忽略了页面加载后操作的类

1 个答案: