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

时间:2012-12-25 19:04:06

标签: javascript jquery jsfiddle

我很快就开始使用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消失了,如果我取消注释注释行,草图根本不起作用。任何建议或信息赞赏。

2 个答案:

答案 0 :(得分:7)

您无需在toggle()方法中包含click(),只需使用:

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

JS Fiddle demo

此外,您正在混合使用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方法/ object(s)(当然,除非你将它们重新包装在jQuery对象中)。

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

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

JS Fiddle demo

参考文献:

答案 1 :(得分:1)

您刚使用了错误的切换功能。有两个toggle s:

toggle Event

toggle Effect

在您的代码中,执行了切换效果,只显示/隐藏元素。这就是为什么它在你点击它时消失了。