blocks|key|1894269|text|if语句将始终返回true，因为即使查询不返回任何元素，它仍然会给出一个jQuery对象。请尝试检查“length”属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1894270|$(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');
++++++++}
++++});
});|code-block|syntax|javascript|1894271|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Your if statement will always return true, because even if your query returns no elements, it will still give you a jQuery object. Try checking the 'length' property instead:

<pre><code>$(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');
 }
 });
});
</code></pre>

blocks|key|2141533|text|$(function()+{
$('#lumiere').bind('click',+function(event)+{
+++++var+v+=+parseInt($('#lumiere').text());

++++if+(v+===+1)+{
++++++++$('body').css('background-color',+"black")
++++++++$('#lumiere').html('2')
++++}
++++else+if+(v+===+2)+{
++++++++$('body').css('background-color',+"white")
++++++++$('#lumiere').html('1')
++++}
}
);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2141534|}+)；|unstyled|2141535|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(function() {
$('#lumiere').bind('click', function(event) {
 var v = parseInt($('#lumiere').text());

 if (v === 1) {
 $('body').css('background-color', "black")
 $('#lumiere').html('2')
 }
 else if (v === 2) {
 $('body').css('background-color', "white")
 $('#lumiere').html('1')
 }
}
);
</code></pre>

}
);

blocks|key|752180|text|我建议你使用Vanilla+JS来完成这个任务，它更容易使用，效率也更高：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|752181|window.onload+=+function()+{+//+if+you+place+the+script+after+the+element,
+++++++++++++++++++++++++++++//+you+can+remove+this+line+and+the+corresponding+}
++++document.getElementById('lumiere').onclick+=+function()+{
++++++++document.body.style.backgroundColor+=+this.firstChild.nodeValue+==+1+?+"black"+:+"white";
++++++++this.firstChild.nodeValue+=+3-this.firstChild.nodeValue;
++++};
};|code-block|syntax|javascript|752182|entityMap|0|LINK|mutability|MUTABLE|url|http://vanilla-js.com/^0|6|A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I would like to suggest you use <a href="http://vanilla-js.com/" rel="nofollow">Vanilla JS</a> for this task, it is much easier to use and much more efficient:

<pre><code>window.onload = function() { // if you place the script after the element,
 // you can remove this line and the corresponding }
 document.getElementById('lumiere').onclick = function() {
 document.body.style.backgroundColor = this.firstChild.nodeValue == 1 ? "black" : "white";
 this.firstChild.nodeValue = 3-this.firstChild.nodeValue;
 };
};
</code></pre>

blocks|key|2141618|text|稍微重构一下你的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2141619|$(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');
++++++++}
++++});
});|code-block|syntax|javascript|2141620|优化包括：|2141621|2141622|bind()是旧的，使用包含过滤器而不是|unordered-list-item|offset|length|style|CODE|2141623|使用click()快捷方式|2141624|不需要在你的回调中重复选择，只需使用this|2141625|The+Id选择器是最快的，不要错过这个机会使用：on()+|2141626|2141627|你根本不需要过滤器，因为它做的并不是你想的那样。它测试您传递的参数是否为文本中包含的，而不是等于。因此，如果您需要后者，请改用text()。|BOLD|2141628|2141629|entityMap^0|0|0|0|0|0|6|0|2|7|0|I|4|0|P|4|0|0|1A|2|1R|6|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@$M|18|N|19|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1A|8|@$M|1B|N|1C|O|P]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1D|8|@$M|1E|N|1F|O|P]]|9|@]|A|$]]|$1|U|3|V|5|L|7|1G|8|@$M|1H|N|1I|O|P]]|9|@]|A|$]]|$1|W|3|-4|5|L|7|1J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|L|7|1K|8|@$M|1L|N|1M|O|Z]|$M|1N|N|1O|O|P]]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|12|$]]

Refactoring a bit your code:

<pre><code>$(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');
 }
 });
});
</code></pre>

The optimizations are:

<ul>
<li><code>bind()</code> is old, use <code>on()</code> instead</li>
<li>Use the <code>click()</code> shortcut</li>
<li>No need to repeat selection inside your callback, just use <code>this</code></li>
<li>The Id selector is the fastest one, don't miss this opportunity using the :contains filter</li>
<li>You don't need the filter at all because it isn't doing what you think. It test if the parameter you pass is contained in the text, not equal. So, if you need the latter, use <code>text()</code> instead.</li>
</ul>

blocks|key|4267779|text|很高兴看到你在使用jQuery。它是一个非常强大的工具，使用起来很有趣。尝试以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4267780|HTML：|4267781|<body>
++++<button+id="lumiere">1</button>
</body>|code-block|syntax|javascript|4267782|让你的html保持原样。|4267783|CSS:|offset|length|style|BOLD|4267784|将这个类添加到<style+type="text/css"></style>块内部的<head></head>部分或者像<link+type="text/css"+rel="stylesheet"+href="external-sheet-name.css"+/>这样链接的外部CSS文件中。|CODE|4267785|.bodyRed+{
++++background-color:+red;
}|4267786|这个类将在下面的JavaScript逻辑中使用。|4267787|JavaScript:|4267788|如下所示修改您的JavaScript：|4267789|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');
++++}
});|4267790|解释：|4267791|4267792|前两条语句存储对两个jQuery对象的引用。这很有用，因为它为jQuery提供了一种引用对象的方法，而不必每次都重新遍历DOM。|unordered-list-item|4267793|对代码的第二个修改是将bind更改为on。.on()是附加事件处理程序的较新、更有效和首选的方法。上面的链接将带您转到.on().|4267794|The的文档第三个修改是通过使用上面创建的类来消除对inline+CSS的需要。这也简化了逻辑。如果<body>标记具有该类，则将其移除并更改按钮文本。否则，请添加它，然后修改按钮文本。|4267795|4267796|​|4267797|这就是所有的东西了。要查看它的实际运行情况，请查看此实时fiddle。|4267798|祝你好运，编码愉快！:)|4267799|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/warlock5658/BaASj/^0|0|0|0|0|0|4|0|7|V|16|D|1O|20|0|0|0|0|B|0|0|0|0|0|0|B|4|I|2|L|5|1N|5|0|Q|6|1E|6|0|0|0|S|6|0|0|0^^$0|@$1|2|3|4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1W|8|@$M|1X|N|1Y|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1Z|8|@$M|20|N|21|O|S]|$M|22|N|23|O|S]|$M|24|N|25|O|S]]|9|@]|A|$]]|$1|T|3|U|5|F|7|26|8|@]|9|@]|A|$G|H]]|$1|V|3|W|5|6|7|27|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|28|8|@$M|29|N|2A|O|P]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2B|8|@]|9|@]|A|$]]|$1|11|3|12|5|F|7|2C|8|@]|9|@]|A|$G|H]]|$1|13|3|14|5|6|7|2D|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|16|3|17|5|18|7|2F|8|@]|9|@]|A|$]]|$1|19|3|1A|5|18|7|2G|8|@$M|2H|N|2I|O|S]|$M|2J|N|2K|O|S]|$M|2L|N|2M|O|S]|$M|2N|N|2O|O|S]]|9|@]|A|$]]|$1|1B|3|1C|5|18|7|2P|8|@$M|2Q|N|2R|O|S]|$M|2S|N|2T|O|S]]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2V|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|2W|8|@]|9|@$M|2X|N|2Y|1|2Z]]|A|$]]|$1|1I|3|1J|5|6|7|30|8|@]|9|@]|A|$]]|$1|1K|3|-4|5|6|7|31|8|@]|9|@]|A|$]]]|1L|$1M|$5|1N|1O|1P|A|$1Q|1R]]]]

Glad to see you're using jQuery. It's a very powerful tool and a lot of fun to use. Try the following:

HTML:

<pre><code>&lt;body&gt;
 &lt;button id="lumiere"&gt;1&lt;/button&gt;
&lt;/body&gt;
</code></pre>

Keep your html as is.

CSS:

Add this class in the <code>&lt;head&gt;&lt;/head&gt;</code> section inside of a <code>&lt;style type="text/css"&gt;&lt;/style&gt;</code> block or in an external CSS file linked like so <code>&lt;link type="text/css" rel="stylesheet" href="external-sheet-name.css" /&gt;</code>.

<pre><code>.bodyRed {
 background-color: red;
}
</code></pre>

This class will be used below in the JavaScript logic.

JavaScript:

Modify your JavaScript like the following:

<pre><code>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');
 }
});
</code></pre>

Explanation: 


<li>The first two statements store references to your two jQuery objects. This is useful because it provides a way for jQuery to reference the objects without re-traversing the DOM each time. This is more efficient in the long run.</li>
<li>The second modification to your code is to change <code>bind</code> to <code>on</code>. <code>.on()</code> is the newer, more efficient, and preferred method for attaching event handlers. The link above will take you to the documentation for <code>.on()</code>.</li>
<li>The third modification is to remove the need for <code>inline</code> CSS by using the class created above. This also simplifies the logic. If the <code>&lt;body&gt;</code> tag has the class, remove it and change the button text. Otherwise, add it and then modify the button text.</li>

That's all there is too it. To see it running in action, check out this live <a href="http://jsfiddle.net/warlock5658/BaASj/" rel="nofollow">fiddle</a>.

Good luck and happy coding! :)

blocks|key|755046|text|不需要这么复杂的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|755047|$(function()+{
++++$('#lumiere').bind('click',+function(event)+{
++++++++++++var+n+=+$('#lumiere').text();
++++++++++++switch+(n)+{
++++++++++++case+'1':
++++++++++++++++$('body').css('background-color',+"black");
++++++++++++$('#lumiere').text(2);
++++++++++++++++break;
++++++++++++case+'2':
++++++++++++++++$('body').css('background-color',+"white");
++++++++++++$('#lumiere').text(1);
++++++++++++++++break;
++++++++++++}++++++++++++
++++});
});|code-block|syntax|javascript|755048|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There's no need so much complications...

<pre><code>$(function() {
 $('#lumiere').bind('click', function(event) {
 var n = $('#lumiere').text();
 switch (n) {
 case '1':
 $('body').css('background-color', "black");
 $('#lumiere').text(2);
 break;
 case '2':
 $('body').css('background-color', "white");
 $('#lumiere').text(1);
 break;
 } 
 });
});
</code></pre>

I'm a beginner in jQuery and trying to have a bit of fun. I'm trying to make a button that will change the background of the page when clicked, as well as change the text of the button. I only need two scenarios:
 - if the button says "1", change the button to "2" and the background to black;
 - if the button says "2", change the button to "1" and the background to white;

My code works for the first click but you can't click more than once.

What did I do wrong? Thanks for your time.

<a href="http://jsfiddle.net/6fRbM/7/" rel="nofollow">http://jsfiddle.net/6fRbM/7/</a>

This is my HTML

<pre><code>&lt;body&gt;
&lt;button id="lumiere"&gt;1&lt;/button&gt;
&lt;/body&gt;
</code></pre>

This is my script

<pre><code>$(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')
 }
 }
 );
}
);
</code></pre>

If/else not working with click event in jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是jQuery的初学者，想找点乐子。我正在尝试制作一个按钮，当点击时，它将改变页面的背景，以及改变按钮的文本。我只需要两个场景：-如果按钮显示为"1"，则将按钮更改为"2"，将背景更改为黑色；-如果按钮显示为"2“，则将按钮更改为"1”，将背景更改为白色；我的代码适用于第一次单击，但您不能多次单击。我做错什么了？耽误...

问If/else不使用jQuery中的单击事件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问If/else不使用jQuery中的单击事件EN