动态分配jQuery按钮部分失败

Question

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

假设我有4个按钮用于4个不同的模板。当然，每个按钮都可以点击。单击的按钮应该成为新的激活模板，其他按钮应该重置(因为之前另一个模板是激活的)。我以为我已经弄清楚了，但由于某种原因，当我想重新分配一个新按钮时，只有最后一个按钮被替换为一个新按钮。

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

小提琴可以找到: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

这是你的新提琴: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>');

Answer 2

当我点击jsfiddle中的按钮时，我看到文本"你已经激活了我"，就在我点击的地方。除了一个按钮，其他所有按钮都消失了。当我点击剩下的按钮时，它没有任何功能。

一些可能对你有帮助的事情:

问:为什么点击后只有一个按钮可见?

A:在$.each循环之外创建oButton。所以只有一个按钮可以放在HTML的某个地方。它是不重复的。因此，当您执行循环时，将创建具有$(this).replaceWith(oNewButton);的最后一个按钮。在此之前的任何调用都不起作用。

为了避免这种情况，你需要每次创建一个新的按钮。

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

问:为什么新按钮对点击没有反应?

A:新按钮实际上是新对象，与旧按钮没有任何关系。因此，点击事件处理程序$('.activate-tpl').click(..) NOT没有任何影响，因为新按钮是在点击处理程序注册后创建的。

要解决这个问题，我建议保留旧的按钮，只要改变你想改变的。当他们被点击，模板应该显示，你可以使用.hide()隐藏他们。

希望有帮助。;)

编辑:这里有一个我认为你想要的例子:http://jsfiddle.net/pWwgm/