Question

我有一个用户（将要）选择模板的布局。根据用户点击的按钮，评估和更新所有匹配（按类名称）按钮。

假设我有四个不同模板的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 ：您在oButton循环之外创建$.each。因此，只有一个按钮可以放在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/

动态分配jQuery按钮部分失败

2 个答案: