我是jQuery的初学者,并试图获得一些乐趣.我正在尝试制作一个按钮,在单击时会更改页面的背景,以及更改按钮的文本.我只需要两种情况: - 如果按钮显示"1",则将按钮更改为"2",将背景更改为黑色; - 如果按钮显示"2",则将按钮更改为"1",将背景更改为白色;
我的代码适用于第一次点击,但您不能多次点击.
我做错了什么？谢谢你的时间.
这是我的HTML
<body>
<button id="lumiere">1</button>
</body>
这是我的剧本
$(function() {
$('#lumiere').bind('click', function(event) {
if ($('#lumiere:contains("1")')) {
$('body').css('background-color', "black")
$('#lumiere').html('2')
}
else if ($('#lumiere:contains("2")')) {
$('body').css('background-color', "white")
$('#lumiere').html('1')
}
}
);
}
);
nde*_*ore 10
你的if语句总是返回true,因为即使你的查询没有返回任何元素,它仍然会给你一个jQuery对象.请尝试检查"长度"属性:
$(function() {
$('#lumiere').bind('click', function(event) {
if ($('#lumiere:contains("1")').length) {
$('body').css('background-color', "black");
$('#lumiere').html('2');
}
else if ($('#lumiere:contains("2")').length) {
$('body').css('background-color', "white");
$('#lumiere').html('1');
}
});
});