jquery - 动态分配 jQuery 按钮部分失败

Question

我有一个布局，用户(将)能够选择模板。根据用户单击的按钮，将评估和更新所有匹配的(按类名称)按钮。

假设我有 4 个按钮用于四个不同的模板。当然，每个按钮都可以单击。单击的按钮应成为新的激活模板，其他按钮应重置(因为在另一个模板处于事件状态之前)。我以为我已经解决了这个问题，但由于某种原因，当我想重新分配一个新按钮时，只有最后一个按钮被替换为新按钮。之前的其他按钮则没有。

JSFiddle 中提供的情况不是一个完整的功能解决方案，但我很好奇为什么只有最后一个按钮处理正确。谁能告诉我更多有关此的信息吗？

fiddle 可以找到:http://jsfiddle.net/z3jYC/ 。 (这是一个工作示例，提供了裸代码来展示该示例)。

这是代码:

HTML:

<button class="activate-tpl" data-template-name="temp1">activate template</button><br/>
<button class="activate-tpl" data-template-name="temp2">activate template</button><br/>
<button class="activate-tpl" data-template-name="temp3">activate template</button><br/>
<button class="activate-tpl" data-template-name="temp4">activate template</button>

JS

$(document).ready(function() { 

    $('button').button();
    var oButton = $('<button class="activate-tpl" data-template-name="">activate template</button>').button();

    $('.activate-tpl').click(function() { 

        var sClicked = $(this).attr('data-template-name');

        $('.activate-tpl').each(function() { 

            if($(this).attr('data-template-name') != sClicked) { 

                var oNewButton = oButton;
                oNewButton.attr('data-template-name', $(this).attr('data-template-name'));
                $(this).replaceWith(oNewButton);
            } else { 

                $(this).replaceWith('You\'ve activated me!');
            }
        });
    });
});

Answer 1

这是你的新 fiddle :http://jsfiddle.net/z3jYC/2/

我注意到的一些事情:

--我将您的 .attr("data-template-name"); 更改为 .data("template-name");
--循环没有重新扫描更改后的模板，因为您从其中删除了 activate-tpl 类!我在这个类中添加了跨度。
--由于动态替换的内容，我将您的点击事件更改为使用 .on

if(data.data("template-name") != sClicked || !data.is("button")) { 
    var oButton = $('<button class="activate-tpl" data-template-name="' + $(this).data("template-name") + '">activate template</button>').button();

    $(this).replaceWith(oButton);
} else { 
    $(this).replaceWith('<span class="activate-tpl">You\'ve activated me!</span>');
}

我还更改了按钮的分配方式，看起来效果更好一些。

编辑:我注意到如果没有template-name数据，替换按钮会被分配一个空白值。如果这种情况持续下去，则会为多个按钮分配该值，从而导致多个按钮被替换。

将附加文本更改为:

data.replaceWith('<span class="activate-tpl" data-template-name="' + sClicked + '">You\'ve activated me!</span>');