jquery - 为什么 jquery 会有这样的行为

Question

$('.box').click(function(){
    $(this).find('p').toggle(
        function () {
            $(this).css({"color" : "red"});
        },
        function () {
            $(this).css({"color" : "black"});
        }
    );
});

如果我执行此脚本，如果我单击“p”而不是 .box 类，“p”颜色将会改变，为什么？以及如何做到这一点，以便当我单击 .box div 时“p”颜色发生变化

Answer 1

.toggle()将事件处理程序分配给 click 事件，您想要的是这样的:

$('.box').toggle(function(){
    $('p', this).css({"color" : "red"});
},  function () {
    $('p', this).css({"color" : "black"});
});

每次包装新函数时， this 都会引用您正在处理的元素(至少对于 this 示例来说， see more about how closures work here )，因此首先是 .box 选择器匹配，然后是里面的每个 p，您想要在 .box 上分配一个点击切换来切换 p 的颜色，因此您使用 .toggle()直接在 .box 上。