Question

希望有人可以帮忙解决这个问题。我有一个运行php foreach，我从数据库中获取多个粒子：

@foreach ($articles as $article)
   <div class="article">    
       <input id="comment" type="text"  class="materialize-textarea"  placeholder="Add comment"/>
   </div>
@endforeach

假设我在数据库中有2篇或更多文章。所以在HTML方面，div得到重复，我有多个具有相同id的div。

接下来我希望jquery获取输入值。这是示例代码

$("#comment").each(function()
{
            $(this).keypress(function(e) 
               {if (e.which == 13) 
                    alert('works');
                });
 });

结果：它完全适用于从数据库中提取的第一条记录（第一篇文章）。在第二篇文章中，JavaScript根本没有触发。我理解它的问题是因为jQuery只读取第一个div。我在网上查了一些解决方案，但没有什么对我有用。最合乎逻辑的解决方案似乎是将.each放在函数中。但结果是一样的。第一篇文章完美地触发了JavaScript，其余文章并没有。

注意：如果php代码看起来很奇怪，请忽略它，它在laravel框架上。尽管如此，它正确执行。此处提供的代码仅显示应用程序的逻辑，而不是实际代码。

Answer 1

id属性应该是唯一的，因为它用于唯一标识元素。 id选择器仅选择具有id的第一个元素，因此请使用class代替元素组。

@foreach ($articles as $article)
   <div class="article">          
       <input class="comment" type="text"  class="materialize-textarea"  placeholder="Add comment"/>
       <!-------^---- set class instead of `id` ---------------------------------------------------> 
   </div>
@endforeach

然后无需使用 each() 对其进行迭代，只需将 keypress() 事件处理程序直接绑定到选择器。

$(".comment").keypress(function(e){
//-^-------- class selector
   if (e.which == 13) 
      alert('works');
});

Answer 2

HTML：

@foreach ($articles as $article)
   <div class="article">    
       <input id="comment" type="text"  class="materialize-textarea commentArea"  placeholder="Add comment"/>
   </div>
@endforeach

Javascript：

$(".commentArea").each(function(){
   $(this).keypress(function(e){
      if(e.which == 13){
         alert("OK");
      }
   });
});

我们不能使用相同的ID。可以使用名称或类。使用类是最好的方法。

JQuery：从具有相同名称的多个id获取keypress上的jquery val

2 个答案: