Question

所以我完成了这项任务，我必须这样做，它与圣诞树有关，你可以点击树枝，把它们变成饰物和诸如此类的东西。当树打开时，你不应该改变装饰品。到目前为止，我已经得到了这个jquery：

$('.branch1, .ornament1, .light1').click(function() 
{
    alert("WARNING - Power off the tree first!");
    die();
});

$('.branch, .ornament, .light').click(function() 
{                             
    this.className = 
    {
       light : 'branch', branch: 'ornament', ornament: 'light'
    }[this.className];
});

$('#treePowerButton').click(function() 
{
    $(".branch, .branch1").toggleClass("branch branch1");
    $(".ornament, .ornament1").toggleClass("ornament ornament1");
    $(".light, .light1").toggleClass("light light1");
    $(".powerStatus, .powerStatus1").toggleClass("powerStatus powerStatus1");
});

$('#treeClearButton').click(function() 
{
    $(".ornament").toggleClass("ornament branch");
    $(".light").toggleClass("light branch");
});

但是当我打开树并单击一个分支或装饰时，它不会抛出警报，它只会使被点击的项目完全消失。我做错了什么？

这里是一个jsfiddle：http://jsfiddle.net/a1smjgrv/

Answer 1

精炼答案：

试试这个jsfiddle：http://jsfiddle.net/a1smjgrv/5/。它将完成您正在寻找的内容，并且比尝试在同一元素上绑定多个单击事件简单得多。

原始答案：

问题是，当页面加载时，没有任何＆＃39; branch1＆＃39;，＆＃39; ornament1＆＃39;或＆＃39; light1＆＃39;页面上的元素，因此包含alert（）的click事件不会绑定到任何内容。只有＆＃39;分支＆＃39;页面上的元素，因此分支的点击事件都是绑定的。

当树电源打开时，＆＃39;分支＆＃39;元素被更改为＆＃39; branch1＆＃39; class，包含className更新的click事件仍附加到该元素。因此，当它尝试根据您的对象文字更新类名时（{light：＆＃39; branch＆＃39 ;, branch：＆＃39; ornament＆＃39;等等...}），它可以＆＃39 ;找到任何一个匹配，因为给定元素的类名现在是＆＃39; branch1＆＃39;而不是＆＃39;分支＆＃39;，所以它将元素上的类名设置为“未定义”＆＃39; （因此，失踪）。

如果希望在将元素呈现给页面的任何时间点将函数绑定到元素，则需要在文档级别绑定它。如下所示：

$(document).on('click', 'branch1', function() {
  alert('SHAZAM!');
});

jquery没有对班级变化做出反应？

1 个答案:

精炼答案：

原始答案：