If/else不使用jQuery中的单击事件
If/else不使用jQuery中的单击事件
提问于 2013-06-28 23:16:43
我是jQuery的初学者，想找点乐子。我正在尝试制作一个按钮，当点击时，它将改变页面的背景，以及改变按钮的文本。我只需要两个场景：-如果按钮显示为"1"，则将按钮更改为"2"，将背景更改为黑色；-如果按钮显示为"2“，则将按钮更改为"1”，将背景更改为白色；
我的代码适用于第一次单击，但您不能多次单击。
我做错什么了？耽误您时间，实在对不起。
http://jsfiddle.net/6fRbM/7/
这是我的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')
}
}
);
}
);回答 6
Stack Overflow用户
回答已采纳
发布于 2013-06-28 23:19:15
if语句将始终返回true，因为即使查询不返回任何元素，它仍然会给出一个jQuery对象。请尝试检查“length”属性：
$(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');
}
});
});Stack Overflow用户
发布于 2013-06-28 23:22:32
稍微重构一下你的代码：
$(function() {
$('#lumiere').click(function(event) {
var $this = $(this);
if ($this.text() === '1') {
$('body').css('background-color', "black");
$this.text('2');
}
else if ($this.text() === '2') {
$('body').css('background-color', "white");
$this.text('1');
}
});
});优化包括：
bind()是旧的，使用包含过滤器而不是- 使用
click()快捷方式 - 不需要在你的回调中重复选择，只需使用
this - The Id选择器是最快的，不要错过这个机会使用：
on() - 你根本不需要过滤器，因为它做的并不是你想的那样。它测试您传递的参数是否为文本中包含的，而不是等于。因此，如果您需要后者，请改用
text()。
Stack Overflow用户
发布于 2013-06-28 23:30:50
很高兴看到你在使用jQuery。它是一个非常强大的工具，使用起来很有趣。尝试以下操作：
HTML：
<body>
<button id="lumiere">1</button>
</body>让你的html保持原样。
CSS:
将这个类添加到<style type="text/css"></style>块内部的<head></head>部分或者像<link type="text/css" rel="stylesheet" href="external-sheet-name.css" />这样链接的外部CSS文件中。
.bodyRed {
background-color: red;
}这个类将在下面的JavaScript逻辑中使用。
JavaScript:
如下所示修改您的JavaScript：
var $body = $('body'),
$button = $('#lumiere');
$button.on('click', function(event) {
if($body.hasClass('bodyRed')) {
$body.removeClass('bodyRed');
$button.text('2');
} else {
$body.addClass('bodyRed');
$button.text('1');
}
});解释：
- 前两条语句存储对两个jQuery对象的引用。这很有用，因为它为jQuery提供了一种引用对象的方法，而不必每次都重新遍历DOM。
- 对代码的第二个修改是将
bind更改为on。.on()是附加事件处理程序的较新、更有效和首选的方法。上面的链接将带您转到.on(). - The的文档第三个修改是通过使用上面创建的类来消除对
inlineCSS的需要。这也简化了逻辑。如果<body>标记具有该类，则将其移除并更改按钮文本。否则，请添加它，然后修改按钮文本。
这就是所有的东西了。要查看它的实际运行情况，请查看此实时fiddle。
祝你好运，编码愉快！:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17368110
复制相关文章
相似问题
腾讯云开发者
