3

我有两个列表项，单击它们时，应将类从“.off”更改为“.on”。一次只有一个元素应该是“.on”，因此当一个元素已经打开并单击另一个元素时，两个元素都应该将类从“.off”更改为“.on”，反之亦然。如果单击具有“.on”类的列表项，则应将类更改为“.off”

我遇到的问题是，当单击具有“.on”类的列表项时，它仍然运行单击功能，就好像它具有“.off”类一样

我的html：

<ul>
    <li><a href="about" class="off">ABOUT</a></li>
    <li><a href="upload" class="off">SUBMIT</a></li>
</ul>

我的 javascript（在 jQuery 1.7.1 上运行）

$('.off').click(function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$('.on').click(function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

有谁知道这里发生了什么？我的代码有问题还是我在这里遇到了某种错误？

http://jsfiddle.net/ZC3CW/6/

4

5 回答 5

4

您用来绑定事件的选择器click()用于选择要添加事件处理程序的元素。运行处理程序时不考虑选择器。

你应该寻找更像这样的东西：

$('li').click(function(event) {
    event.preventDefault();

    if ($(this).hasClass('off')) {
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
    } else { // $(this).hasClass('on');
        $(this).addClass("off").removeClass("on");
    }
});

li您可能希望通过将类/id 添加到ulor来使选择器更加明确li。

为了进一步混淆，您也可以这样做（如果您使用的是 jQuery > 1.7）；

$(document).on('click', '.off', function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$(document).on('click', '.on', function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

这是因为该.on()函数通过将事件处理程序附加到选定元素 ( document) 来工作，并且仅click在事件源自的元素与事件发生时的选择器匹配.off 时才会在指定的事件 ( ) 上执行处理程序（函数）解雇，而不是在绑定时间。

于 2012-01-27T15:55:21.237 回答
2

我建议将点击句柄添加到不同的选择器，这应该适合你......

$("ul li a").click(function(e){
   e.preventDefault();

   if($(this).hasClass("off")){
      $("ul li a").addClass("off").removeClass("on");
      $(this).addClass("on").removeClass("off");
   }
   else{
      $(this).addClass("off").removeClass("on");
   }
});
于 2012-01-27T15:57:55.213 回答
1

问题是 jQuery 处理程序会在页面加载时附加，并且无论更改其类如何都保持不变。使用live('click', handler) on('click', handler)而不是 click()。

编辑：刚刚注意到 .live() 在 jQuery 1.7 中已被弃用。

于 2012-01-27T15:56:00.957 回答
0

我看到的问题是你的“on”类在点击事件发生时没有发挥作用，所以你的$('.on').click方法永远不会被调用。

在更改课程后尝试重新分配您的事件（示例如下）：

var assignClicks = function () {
    $('.off').click(function(event) {
        event.preventDefault();
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
        assignClicks();
    });
    $('.on').click(function(event) {
        event.preventDefault();
        $(this).addClass("off").removeClass("on");
        assignClicks();
    });
};
assignClicks();

希望这可以帮助，

皮特

于 2012-01-27T16:00:53.297 回答
0

点击绑定到元素而不是类。也许您可以将事件附加到

  • 元素并检测/切换元素类：

    $('li').click(function(event) {
    event.preventDefault();
    if( $(this).hasClass('on') ) {
        $(this).removeClass('on');
    }
    else {
        $(this).addClass('on');
        $(this).siblings().removeClass('on');
    }
});
    • 于 2012-01-27T16:25:55.430 回答