Question

我是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')
        }
    }
    );
}
);

Answer 1

你的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');
        }
    });
});

Answer 2

重构一下你的代码：

$(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()已过时，请使用on()
使用click()快捷方式
无需在回调中重复选择，只需使用this
Id选择器是最快的选择器，请不要错过使用：contains filter
您根本不需要过滤器，因为它没有按照您的想法进行操作。它测试您传递的参数在文本中是否包含，而不是等于。因此，如果您需要后者，请改用text()。

Answer 3

很高兴看到你正在使用jQuery。它是一个非常强大的工具，使用起来很有趣。请尝试以下方法：

<强> HTML：

<body>
    <button id="lumiere">1</button>
</body>

保持你的HTML格式。

<强> CSS：

在<head></head>块内的<style type="text/css"></style>部分或与<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()。

的文档

第三个修改是通过使用上面创建的类来消除对inline CSS的需要。这也简化了逻辑。如果<body>标记包含该类，请将其删除并更改按钮文本。否则，添加它然后修改按钮文本。

这就是全部。要查看其在运行中的效果，请查看此实时fiddle。

祝你好运，编码愉快！：）

Answer 4

不需要那么多并发症......

$(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;
            }            
    });
});

Answer 5

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

} ）;

Answer 6

我建议您使用Vanilla JS执行此任务，它更容易使用且效率更高：

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;
    };
};

如果/不使用jQuery中的click事件

6 个答案: