2

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

假设我有四个不同模板的 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!');
            }
        });
    });
});
4

2 回答 2

3

这是你的新小提琴：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>');
于 2013-04-25T14:26:05.557 回答
1

当我单击您提供的 jsfiddle 中的按钮时，我会在单击的位置看到文本“您已激活我”。除一个之外的所有其他按钮都会消失。当我单击剩余的按钮时，它没有任何功能。

所以有些事情可能对你有帮助：

Q：为什么点击后只能看到一个按钮？

答：您创建了oButton外部$.each循环。因此，只有一个按钮可以放置在 HTML 中的某处。它不是重复的。因此，当您通过循环时，$(this).replaceWith(oNewButton);将创建最后一个按钮。在此之前的任何其他调用均无效。

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

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

问：为什么新按钮对点击没有反应？

A : 新按钮是真正的新对象，与旧按钮无关。所以点击事件处理程序没有$('.activate-tpl').click(..)任何效果，因为新按钮是在点击处理程序注册后创建的。

为了解决这个问题，我建议保留旧按钮并更改您想要更改的任何内容。当它们被单击并且应该显示模板时，您可以使用隐藏它们.hide()。

希望有帮助。;)

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

于 2013-04-25T14:20:40.100 回答