通过单击切换背景颜色更改

Question

我正在快速做一个jsFiddle以了解更多有关jQuery API的信息,而且一个小提琴并没有像我预期的那样工作.

jsFiddle:http://jsfiddle.net/7j5Fc/

HTML:

<div></div>

CSS:

div {
background:red;
height:100px;
width:150px;
}

JS:

$('div').click(
    function(){
        $(this).toggle(function(){
            $(this).style.background="blue";
        }
        //function(){
        //this.style.background = "orange";
        //}
        );
    }
);

奇怪的是,当我点击它时,div消失了,如果我取消注释注释的行,草图根本不起作用.任何建议或信息赞赏.

Answer 1

你不需要toggle()在click()方法中包装,只需使用:

$('div').toggle(
    function(){
        $(this).css('background-color', 'blue');
    },
    function(){
        $(this).css('background-color', 'red');
    });?

JS小提琴演示.

此外,您正在混合使用jQuery和JavaScript:

jQuery $(this)对象没有style方法; 需要使用该css()方法; 这两种方法不可互换,因此您可以使用上述css()方法,也可以使用纯JavaScript:

this.style.backgroundColor = 'blue';

例如,或者从jQuery切换到纯JavaScript:

$(this)[0].style.backgroundColor = 'blue';

要么:

$(this).get(0).style.backgroundColor = 'blue';

这两种方法基本上都是从jQuery对象中检索纯DOM节点/对象,它允许使用本机JavaScript方法,但它确实意味着你不能在那些节点/对象上使用jQuery方法(s) )(除非你在jQuery对象中重新包装它们,当然).

当然,如果你只是想使用jQuery来处理事件委托,你可以使用这个click()方法,再加上一个三元:

$('div').click(function(){
    this.style.backgroundColor = this.style.backgroundColor == 'blue' ? 'red' : 'blue';
});

JS小提琴演示.

参考文献:

• click().
• css().
• get().
• toggle().