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指的是你正在处理的元素（至少，这个例子，see more about how closures work here），所以一开始这是.box选择器匹配，然后是p里面的.box，你想在p上指定一个点击切换来切换.box的颜色，所以你使用{{{ 3}}直接在{{1}}上。

Answer 2

另一种选择是简单地在类中分配颜色，并使用.toggleClass()。

最初为p类提供black类，然后切换red类。

CSS

    .black { color: black; }
    .red { color: red; }

的jQuery

$('.box').click(function(){
        $(this).find('p').toggleClass('red');
});

为什么jquery的行为如此

2 个答案: