Question

为什么我的代码只能在同一个元素上运行一次？

这是我的按钮：

<button class="btn-warning line-focus" id="1">Focus</button>
<button class="btn-default line-normal" id="2">Normal</button>
<button class="btn-warning line-focus" id="3">Focus</button>
<button class="btn-warning line-focus" id="4">Focus</button>
<button class="btn-warning line-focus" id="5">Focus</button>

这是我的jQuery脚本：

$(".line-focus").live('click', function() {
    //unfocus line
    var lineid = this.id;
        $(this).removeClass("btn-warning");
        $(this).removeClass("line-focus");
        $(this).addClass("line-normal");
        $(this).addClass("btn-default");
        $(this).text('Normal');
});


$(".line-normal").live('click', function() {
    //focus line
    var lineid = this.id;
        $(this).removeClass("btn-default");
        $(this).removeClass("line-normal");
        $(this).addClass("line-focus");
        $(this).addClass("btn-warning");
        $(this).text('Focus');
});

我错了什么？应该可以将相同的按钮聚焦/取消聚焦一百万次

Answer 1

由于您要删除点击的元素类，因此您可以再次点击，而您将无法获得您期望的内容。

使用event delegation方法：

$(document).on('click',".line-focus", function() {
    //unfocus line
    var lineid = this.id;
        $(this).removeClass("btn-warning");
        $(this).removeClass("line-focus");
        $(this).addClass("line-normal");
        $(this).addClass("btn-default");
        $(this).text('Normal');
});


$(document).on('click',".line-normal", function() {
    //focus line
    var lineid = this.id;
        $(this).removeClass("btn-default");
        $(this).removeClass("line-normal");
        $(this).addClass("line-focus");
        $(this).addClass("btn-warning");
        $(this).text('Focus');
});

此外，我建议您使用on而不是live（）方法，因为您使用的是1.10版本的jQuery。

功能只工作一次

1 个答案: