我很快就开始使用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消失了,如果我取消注释注释行,草图根本不起作用。任何建议或信息赞赏。
答案 0 :(得分:7)
您无需在toggle()
方法中包含click()
,只需使用:
$('div').toggle(
function(){
$(this).css('background-color', 'blue');
},
function(){
$(this).css('background-color', 'red');
});
此外,您正在混合使用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';
});
参考文献:
答案 1 :(得分:1)