Javascript 如何在Jquery中选择html元素的特定实例?
我有一个待办事项列表应用程序,允许用户创建待办事项。现在我正在使用jquery构建功能,它允许用户删除任务 问题是当我点击一个todo上的删除按钮时,应用程序会要求我确认删除每个列表项。当我在其中一个上单击“取消删除”时,它会取消所有的删除。换句话说,我在所有HTML元素上接收到重复行为 我相信这是因为所有todo项都是从同一个html.erb模板生成的,在模板中,我给每个元素指定了它的ID,以便我可以引用它,但由于每个ID都是相同的,我无法区分包含相同ID元素的不同todo。如何在Jquery中选择html元素的特定实例 完整的JS代码/HTML输出: Rails html.erb代码:Javascript 如何在Jquery中选择html元素的特定实例?,javascript,jquery,html,ruby-on-rails,Javascript,Jquery,Html,Ruby On Rails,我有一个待办事项列表应用程序,允许用户创建待办事项。现在我正在使用jquery构建功能,它允许用户删除任务 问题是当我点击一个todo上的删除按钮时,应用程序会要求我确认删除每个列表项。当我在其中一个上单击“取消删除”时,它会取消所有的删除。换句话说,我在所有HTML元素上接收到重复行为 我相信这是因为所有todo项都是从同一个html.erb模板生成的,在模板中,我给每个元素指定了它的ID,以便我可以引用它,但由于每个ID都是相同的,我无法区分包含相同ID元素的不同todo。如何在Jquery
<%= form_for task do |form| %>
<li>
<% if !task.completed %>
<p> <%= task.title%></p>
<p>– <%=task.body %></p>
<%= form.check_box :completed, class: "completed_checkbox" %>
<%= button_to "Delete post",{}, class:"delete_button" %>
<%= link_to "Confirm deletion",{}, class: "confirm_links", id: "confirm_delete" %>
<%= link_to "Cancel",{}, class: "confirm_links cancel_delete" %>
</li>
<% end %>
<% end %>
在事件处理程序中,您可以通过以下代码行获取对该特定项的引用:
var targetElement = $(event.target).closest('li');
在事件处理程序中,您可以通过以下代码行获取对该特定项的引用:
var targetElement = $(event.target).closest('li');
石田的回答似乎是正确的,但我还没有对他的回答发表评论的名声。我认为您必须将event.target包装成美元,以便:
var targetElement = $(event.target).closest('li');
希望这能有所帮助。石田的回答似乎是正确的,但我还没有对他的回答发表评论的名声。我认为您必须将event.target包装成美元,以便:
var targetElement = $(event.target).closest('li');
希望能有所帮助。以下是您操作按钮和链接的方法:
$("#task").on("click",".delete_button",function(){
$(this).hide();
$(this.form).next('.confirm_links').show()
.next('.confirm_links').show();
return false;
});
$("#task").on("click",".cancel_delete",function(){
$(this).hide()
.prev(".confirm_links").hide()
.prev('form').find(".delete_button").show();
return false;
});
按钮/链接演示:
演示只展示了一种方法,可以将共享同一选择器的多个元素中的一个元素作为目标。您可以使用的其他有用jQuery功能包括:
jQuery.closest()
jQuery.nextUntil()
jQuery.prevUntil()
找到最适合你的 以下是您操作按钮和链接的方法:
$("#task").on("click",".delete_button",function(){
$(this).hide();
$(this.form).next('.confirm_links').show()
.next('.confirm_links').show();
return false;
});
$("#task").on("click",".cancel_delete",function(){
$(this).hide()
.prev(".confirm_links").hide()
.prev('form').find(".delete_button").show();
return false;
});
按钮/链接演示:
演示只展示了一种方法,可以将共享同一选择器的多个元素中的一个元素作为目标。您可以使用的其他有用jQuery功能包括:
jQuery.closest()
jQuery.nextUntil()
jQuery.prevUntil()
找到最适合你的 您不能有重复的ID;您最初使用类选择器的想法非常棒-您只需要使用按钮的定位来定位您要操作的特定元素。此部分-id:confirm\u delete-您需要增加一个计数器,并将其添加到id上如果您使用link\u to的confirm behavior怎么办?您不能有重复的ID;您最初使用类选择器的想法非常棒-您只需要使用按钮的定位来定位您要操作的特定元素。此部分-id:confirm\u delete-您需要增加一个计数器,并将其添加到id上如果您使用link\u to的confirm behavior怎么办?像这样$task.onclick、.delete_按钮,functionevent{var currentElement=event.target.closest'li'$this.hide;类似于-$task.onclick、.delete_按钮,functionevent{var currentElement=event.target.closest'li.hide;类似于$task.onclick、.delete_按钮,functionevent{var currentElement=event.target.closest'li'$this.hide;像这样-$task.onclick,.delete_按钮,functionevent{var currentElement=event.target.closest'li.hide;谢谢..我将更新我的答案..我完全忘记了:PThanks..我将更新我的答案..我完全忘记了:P