Question

我正在尝试制作一个蓝色div，当点击它时变成红色，红色div变回蓝色（所以我可以在点击后在点击上添加更多事件，所以.css实际上不是一个选项）

当蓝色时点击div时，它会变为红色。但是，当我单击红色div时，即使我添加了一个简单的警报（）

，它也没有响应

有谁知道我做错了什么？

这是我当前的代码和JSFiddle

代码：

$("#Blue").click(function(){
    $("#Blue").attr("id","Red");
});

$("#Red").click(function(){
    $("Red").attr("id","Blue");
});

如果有人能告诉我，我做错了什么事情会很好，谢谢你提前

Answer 1

您需要使用事件委派 - 您的click处理程序在首次运行代码时绑定到匹配的元素，然后才开始运行。由于该时间点没有#Red元素，因此第二个单击处理程序不会绑定到任何内容。

$(document).on('click',"#Blue", function(){
    $("#Blue").attr("id","Red");
});

$(document).on('click',"#Red", function(){
    $("#Red").attr("id","Blue");
});

http://jsfiddle.net/mblase75/HDFyn/

http://api.jquery.com/on

那就是说，“正确”的方法是添加和删除一个类，而不是更改ID：

$('#btn').on('click', function(){
    $(this).toggleClass("red blue");
});

http://jsfiddle.net/mblase75/mKMW6/

Answer 2

.click()仅在您调用它时绑定到现有元素;它不会绑定到稍后创建的元素或稍后为其分配id的元素。

修复是使用事件委派。有关详细信息，请参阅here和here。

此外，使用类 - 更灵活。

Answer 3

<强> HTML

<div class="Test blue">Test</div>

<强>的jQuery

$(".blue, .red").click(function(){
    $(this).toggleClass('red blue')
});

<强> CSS

.Test{
    width: 50px;
    height: 50px;
}
.blue{
    background-color: blue;
}
.red{
    background-color: red;
}

小提琴：http://jsfiddle.net/8FmSt/3/

Answer 4

您可以使用该类并更新ID，而不是使用2个函数来执行该操作，

$('.Test').on('click', function () {
    this.id = (this.id == 'Blue')?'Red':'Blue';
});

DEMO： http://jsfiddle.net/8FmSt/2/

如果只是改变颜色，那么使用css改变颜色如下，

$('.Test').on('click', function () {
    $(this).toggleClass('Red Blue');
});

http://jsfiddle.net/8FmSt/5/

Answer 5

尝试：

$(".Test").click(function(){
    var id = $(this).attr("id");
    if(id == "Red"){
        $(this).attr("id","Blue");
    }
    else{
        $(this).attr("id","Red");
    }   
});

Updated fiddle here.

Answer 6

让我们不复杂

HTML

<div class="Test">Test</div>

JQUERY

$(".Test").on('click', function () {
  $(this).toggleClass("red");
});

CSS

.Test {
    width: 50px;
    height: 50px;
    background: blue;
}
.red {
    background: red;
}

jQuery更改ID将无法运行功能

6 个答案: