1

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

6 回答 6

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');
        }
    });
});
于 2013-06-28T15:19:14.660 回答
1

很高兴看到您正在使用 jQuery。这是一个非常强大的工具，使用起来很有趣。尝试以下操作：

HTML：

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

保持您的 html 原样。

CSS：

<head></head>在块内的<style type="text/css"></style>部分或像这样链接的外部 CSS 文件中添加此类<link type="text/css" rel="stylesheet" href="external-sheet-name.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().
  • 第三个修改是通过使用上面创建的类来消除对inlineCSS 的需求。这也简化了逻辑。如果<body>标签有类，删除它并更改按钮文本。否则，添加它然后修改按钮文本。

    • 仅此而已。要查看它的实际运行情况，请查看这个 live fiddle。

    祝你好运，编码愉快！:)

    于 2013-06-28T15:30:50.087 回答
    1

    没必要这么复杂...

    $(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;
            }            
    });
});
    于 2013-06-28T18:22:15.457 回答
    1

    重构一下你的代码：

    $(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 过滤器的机会
    • 你根本不需要过滤器，因为它没有按照你的想法做。它测试您传递的参数是否包含在文本中，不等于。因此，如果您需要后者，请text()改用。
    于 2013-06-28T15:22:32.223 回答
    0

    我想建议你使用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;
    };
};
    于 2013-06-28T15:20:09.687 回答
    0 
    $(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')
    }
}
);

    });

    于 2013-06-28T15:19:48.290 回答