WordPress-jQuery函数具有相同类/ ID的多个元素

Question

下面的代码将占位符添加到我的#e_newsletter_email div中。 但是，我为电子通讯添加了一个附加的注册框，并且占位符未显示在第二个上。 有没有办法将此代码应用于两个注册框？

jQuery(function($) {
  $('#e_newsletter_email').attr( 'placeholder', 'You Email Address' );
});

我尝试添加此代码以强制ID添加一个类，但同样，这仅适用于第一个ID。 还有其他想法吗？

jQuery(function($) {
    $('#e_newsletter_email').addClass('e_newsletter_email');
});

谢谢

Answer 1

一个ID只能使用一次。 将类用于不需要唯一标识的元素。

Answer 2

经过@ mark.hch的一些帮助后，我们在哪里可以找到如何创建解决方法。 下面是最终代码：

<script type="text/javascript">

jQuery(function($) { 
 $('input').each(function() { if($(this).attr('id') == 'e_newsletter_email') { $(this).addClass('e_newsletter_email_custom'); } });
});

jQuery(function($) {
  $('.e_newsletter_email_custom').attr( 'placeholder', 'You Email Address' );
});

</script>

首先，我们需要遍历每个id，并将新类添加到e_newsletter_email（已使用两次）中。 然后，一旦我们将类添加到id中，就可以在其中更新原始函数以使用class代替id，并且一切正常！

Answer 3

这个问题的真正答案是在两个字段中都使用类而不是ID。 如评论中所述，ID对于页面上的每个元素应该是唯一的。 但是，在这种情况下，元素仅包含一个ID，然后问题就变成了如何向元素添加类，以便将来的选择器可以将它们全部（或同时抓住）以进行操纵。

使用ID选择器$('#e_newsletter_email')仅选择一个元素（因为jQuery假定只有一个具有该ID的元素）。 因此，我们需要一个更通用的选择器-在这种情况下，两个元素都是输入，因此选择器$('input')应该至少获取那些元素。

由于页面上的输入可能要多于有问题的输入，因此我们需要过滤掉所需的输入。 在这种情况下，我们将比较元素的ID属性（因为我们知道，即使它们应该是唯一的，但两个元素实际上包含相同的ID）。

即使有多个具有相同ID的元素，也可以获取元素的ID（ $(this).attr('id')将始终显示元素的已分配ID，即使不是唯一的）。

因此，代码变为：

//loop through all inputs
$('input').each(function() {
  //if the input currently iterating over has the ID in question
  if$(this).attr('id') == 'e_newsletter_email') {
    //add the class for the input
    $(this).addClass('e_newsletter_email_custom');
  }
});