当使用 jQuery 在按钮中附加字体真棒图标时,当我单击另一个按钮时图标消失
When appending a font awesome icon in a button using jQuery the icon disappears when I click another button
我正在使用 jQuery 制作待办事项列表 Web 应用程序。我有一个灰色的 bootstrap 按钮和一个空框图标(来自 font awesome)来显示项目不完整。当用户完成任务时,我希望按钮变为绿色,图标变为选中框图标(也来自很棒的字体)。我可以通过更改 class 使按钮变为绿色,并更改一个项目的图标,但是当我单击另一个项目以标记为完成时,前一个按钮保持绿色,但复选框图标消失。
基本上,<i class="fa fa-check-square-o"></i>
图标的代码会从单击第二个按钮后单击的第一个按钮的代码中删除,但前一个按钮仍保持绿色。当我单击第三个按钮时,第二个按钮也会发生同样的事情。我怎样才能让 <i class="fa fa-check-square-o"></i>
留下来?在此先感谢您的帮助。
var checked = $("<i>").addClass("fa fa-check-square-o");
$("table").on("click", ".btn-default", function(){
$(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
});
尝试简化这条线
$(this).replaceWith("<button type='button' class='btn btn-success'><li class='fa fa-check-square-o'></li></button");
只需将选中的元素放入点击范围
$(document).on("click", ".btn-default", function(){
checked = $("<i>").addClass("fa fa-check-square-o");
$(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
});
否则它将始终引用相同的 <i>
元素并将其附加到下一个单击的按钮
将 var checked 的声明移动到点击处理程序中。原因是您创建了一个元素并在每次调用 .append.
时四处移动它
来自 .append 文档
"If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned)"
我正在使用 jQuery 制作待办事项列表 Web 应用程序。我有一个灰色的 bootstrap 按钮和一个空框图标(来自 font awesome)来显示项目不完整。当用户完成任务时,我希望按钮变为绿色,图标变为选中框图标(也来自很棒的字体)。我可以通过更改 class 使按钮变为绿色,并更改一个项目的图标,但是当我单击另一个项目以标记为完成时,前一个按钮保持绿色,但复选框图标消失。
基本上,<i class="fa fa-check-square-o"></i>
图标的代码会从单击第二个按钮后单击的第一个按钮的代码中删除,但前一个按钮仍保持绿色。当我单击第三个按钮时,第二个按钮也会发生同样的事情。我怎样才能让 <i class="fa fa-check-square-o"></i>
留下来?在此先感谢您的帮助。
var checked = $("<i>").addClass("fa fa-check-square-o");
$("table").on("click", ".btn-default", function(){
$(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
});
尝试简化这条线
$(this).replaceWith("<button type='button' class='btn btn-success'><li class='fa fa-check-square-o'></li></button");
只需将选中的元素放入点击范围
$(document).on("click", ".btn-default", function(){
checked = $("<i>").addClass("fa fa-check-square-o");
$(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
});
否则它将始终引用相同的 <i>
元素并将其附加到下一个单击的按钮
将 var checked 的声明移动到点击处理程序中。原因是您创建了一个元素并在每次调用 .append.
时四处移动它来自 .append 文档
"If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned)"