jQuery$this不工作

我接到这个电话

  $('#viewproject').click(function() {
    console.log($(this).data('val'));
    $.ajax({
       type:'PATCH', 
       url: "../home/"+$(this).data('val'), 
       data: $.param({ id: 1})
    });
  });

我打电话给rails

<% @projects.each do |project| %>
    <li>
      <figure>
         <img src="<%= project.imageurl %>">
         <figcaption>
         <h3><%= project.title %></h3>
         <i class="icon-eye-open"><%= project.count %> Views</i>
         <a id="viewproject" data-val="<%= project.id %>" target="_blank" href="<%= project.imagelink %>">Take a look</a>
      </figcaption>
      </figure>
   </li>
 <% end %>

但它仅适用于id为viewproject的第一个按钮。谁能告诉我我做错了什么吗？

ID选择器viewproject将只返回一个元素，因为每个元素都应该只有一个ID为viewproject的元素

这就是为什么您只将处理程序附加到第一个处理程序，特别注意这一部分：

选择具有给定id属性的单个元素

---

它实际上转换为document.getElementById，顾名思义，它也只返回一个元素。

在html中不能对多个元素使用id。 将id=example更改为class=example将解决您的问题。

---

BR

Id必须是元素的唯一Id，在Id情况下，由于有多个元素具有相同的Id，因此它将始终只针对它在DOM中找到的第一个元素，并保留其余元素

因此，在迭代生成多个html块时，不要使用id，而是使用类：

<a class="viewproject" data-val="<%= project.id %>" target="_blank" href="<%= project.imagelink %>">Take a look</a>

---

HTML元素上的ID是唯一标识符

改为在元素上使用类：

<a class="viewproject" data-val="<%= project.id %>" target="_blank" href="<%= project.imagelink %>">Take a look</a>

…并更新jQuery选择器以反映该更改：

$'.viewproject'

---

CSS技巧有一篇关于id与类的优秀文章：

多个HTML元素不应该具有相同的id。

<a class="viewproject" data-val="<%= project.id %>" target="_blank" href="<%= project.imagelink %>">Take a look</a>

$('.viewproject').click(function() {
........
........

<a class="viewproject" data-val="<%= project.id %>" target="_blank" href="<%= project.imagelink %>">Take a look</a>