如何在具有相同ID的多个元素上分配onclick事件

Question

我正在尝试创建一个简单的“喜欢”按钮，当用户单击此按钮时，喜欢的按钮会保持红色。

我为我的4个按钮制作了一个类，但这并不是很有效，所以，我想找到另一种方法。

当用户单击“喜欢”按钮时：
----如果用户已经喜欢：不喜欢（切换.active）
----其他：赞（切换.active）

我如何显示“赞”按钮：

-contains

我的代码（仅适用于一个按钮，但不止一个按钮有效）

<svg id="articleFooter_like" <!-- Other params -->>
  <!-- Path here -->
</svg>

<svg id="articleFooter_like" <!-- Other params -->>
  <!-- Path here -->
</svg>

<svg id="articleFooter_like" <!-- Other params -->>
  <!-- Path here -->
</svg>

按钮的样式：

$(document).ready(function()
{
  $('#articleFooter_like').click(function()
  {
    $(this).toggleClass("active");
  });
}

为了集中多个ID，我尝试了一下（无效）：

#articleFooter_like
{
  fill: white;
}

#articleFooter_like:hover, #articleFooter_like.active
{
  fill: red;
}

Answer 1

尝试使用此类。

    var $likeButtons = jQuery('.articleFooter_like')
    $likeButtons.click(function() {
        jQuery(this).toggleClass('action')
    })

.action {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="like1" class="articleFooter_like">1</div>
<div id="like2" class="articleFooter_like">2</div>
<div  id="like3" class="articleFooter_like">3</div>

如果您想选择多个ID，可以执行以下操作：

jQuery('[id^=like]').click(function() {
    jQuery(this).toggleClass('action')
})

Answer 2

我不建议这样做，而应该使用类。

但是在jquery中，您可以使用属性搜索：

$(['id=articleFooter_like]')

通过ID搜索的演示示例：

$(document).ready(function() {
  $('[id=articleFooter_like]').click(function() {
    $(this).toggleClass("active");
  });
})

#articleFooter_like
{
  fill: blue;
}

#articleFooter_like:hover, #articleFooter_like.active
{
  fill: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="articleFooter_like" >
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

<svg id="articleFooter_like" >
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

<svg id="articleFooter_like" >
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

真实场景

在实际情况下我会做什么将id="articleFooter_like"更改为class="articleFooter_like"，它看起来像：

$(document).ready(function() {
  $('.articleFooter_like').click(function() {
    $(this).toggleClass("active");
  });
})

.articleFooter_like
{
  fill: blue;
}

.articleFooter_like:hover, .articleFooter_like.active
{
  fill: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="articleFooter_like" >
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

<svg class="articleFooter_like" >
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

<svg class="articleFooter_like" >
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>