Question

我有这个ajax电话

  $('#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的第一个按钮。谁能告诉我我做错了什么？

Answer 1

ID选择器#viewproject只返回一个元素，因为应该只有一个元素具有id viewproject

这就是为什么您只将处理程序附加到第一个<a>标记。

改为使用班级。

类似于：

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

然后：

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

有关更多背景信息，请阅读id selector上的文档，特别注意此部分（强调我的）：

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

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

Answer 2

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

请在您的元素上使用类：

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

...并更新您的jQuery选择器以反映该更改：

$('.viewproject')

CSS-Tricks有一篇关于id与类的优秀文章：http://css-tricks.com/the-difference-between-id-and-class/

Answer 3

您不能将id用于html中的多个元素。更改＆＃34; id =＆＃34;示例＆＃34;＆＃34; to＆＃34; class =＆＃34;示例＆＃34;＆＃34;将解决您的问题。 BR

Answer 4

Ids必须是唯一的元素，在Id的情况下，因为有多个具有相同id的元素，它将始终仅定位它将在DOM中找到的第一个元素，并将保留其余元素。

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

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

并在类选择器上编写事件：

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

jQuery $这不起作用

4 个答案: