Question

在原始HTML代码中创建了两个按钮。

<div class=ex>
    <button class=showprice>Show</button>
    <button class=hideprice>Hide</button>
    <table class=hideprice>
    ... rest of table.

这是jquery：

$(document).ready(function () {
    $('button.showprice').click(function () {
        if ($(this).hasClass('showprice')) {
            $(this).removeClass('showprice');
            $(this).addClass('hideprice');
            $(this).siblings().removeClass('hideprice');
            $(this).siblings().addClass('showprice');
        } else {
            $(this).removeClass('hideprice');
            $(this).addClass('showprice');
            $(this).siblings().removeClass('showprice');
            $(this).siblings().addClass('hideprice');
        }
    });
});

jsfiddle链接：http://jsfiddle.net/sgbotsford/MzuE9/1/

在示例中，而不是显示和隐藏，我已经做了红色和蓝色，以便更清楚发生了什么。在工作中，他们会标记显示：无和显示：继承。

现在我预计会发生的是点击任一按钮都会导致节目和隐藏（红色和蓝色）反转。此外，我希望单击隐藏（红色）按钮不起作用，因为它与button.showprice选择器不匹配。发生的是只有第一个按钮有效，它既可以是红色也可以是蓝色。如果我将button.showprice更改为按钮，则两个按钮都可以正常工作。它的作用似乎是函数没有发现按钮和选择器的匹配已经改变。

我在这里错过了一个概念。请赐教。

Answer 1

目前您只绑定到showprice按钮

使用

$('button.showprice, button.hideprice').click(function () {

而不是

$('button.showprice').click(function () {

DEMO

事件与标识符元素绑定。即带有showprice类的按钮。事件是绑定事件后，即使您更改类事件也将与该元素相关联。

在Example中，我删除了类showprice，但事件仍然是绑定的。虽然我将 showprice 添加到第二个按钮事件但不会被第二个按钮绑定

Answer 2

你不需要两个按钮。

HTML：

<button class="btn ">Hide</button>

JS：

$(document).ready(function () {
    $('.btn').click(function () {
        $(this).text($(this).text() == "Hide" ? "Show" : "Hide"); 
        $(this).siblings().toggleClass('showprice hideprice');
    });
});

FIDDLE：http://jsfiddle.net/MzuE9/6/

Answer 3

http://jsfiddle.net/MzuE9/5/

您需要使用.on。当DOM加载时，它只会播放定义的对象。因此，当您告诉它在click上查看button.showprice操作时，它只会在加载dom时侦听具有该选择器的对象的点击次数。

无论发生什么变化，

.on都会倾听。

一个按钮工作，一个不在jQuery中。

3 个答案: