javascript - jquery 对类更改没有反应？

Question

所以我有一个必须要做的作业，它与一棵圣诞树有关，你可以点击 Twig 并将它们变成装饰品之类的。当树长成后，您不应该能够更换装饰品。到目前为止我已经得到了这个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");
});

但是当我打开树并单击 Twig 或装饰品时，它不会发出警报，它只会使单击的项目完全消失。我做错了什么？

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

Answer 1

精炼答案:

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

<小时/>

原始答案:

问题是，当页面加载时，页面上没有任何“branch1”、“ornament1”或“light1”元素，因此包含alert()的点击事件未绑定(bind)到任何内容。页面上只有“分支”元素，因此只绑定(bind)分支的点击事件。

当树启动并且“branch”元素更改为“branch1”类时，包含 className 更新的单击事件仍附加到该元素。因此，当它尝试根据对象字面量({light: 'branch'、branch: 'ornament' 等...})更新类名时，它无法找到其中任何一个的匹配项，因为类给定元素的名称现在是“branch1”而不是“branch”，因此它将元素上的类名称设置为“未定义”(因此消失)。

如果您希望在元素呈现到页面的任何时间点将函数绑定(bind)到元素，则需要在文档级别绑定(bind)它。类似于以下内容:

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