JQuery onclick获取元素id，使用值作为变量来改变CSS背景颜色的目标类

Question

我有一个项目列表，每个项目都有一个不同的id(JS fiddle https://jsfiddle.net/r45gjykw/2/)。用户可以单击列表中的某个项目，并通过 onclick JQuery 获取该元素的 id 值并将其设为变量字符串。此字符串值用于更改 class 中携带该值的任何元素的 css background-color:

所以，点击:

<li id="Guilhem_Vidal_MSP-AU" class="highlight-entities" onclick="highlightEntities()">Guilhem Vidal</li>

触发此 jQuery 操作:

function highlightEntities() {
    var entclass = $(this).attr('id');
    $("."+entclass).css("background-color", "yellow");
}

它应该采用以下任何实例(例如):

<a href="http://somefoosite/Guilhem_Vidal_MSP-AU" class="change_link_colour Guilhem_Vidal_MSP-AU">W<span class="supplied">illelmum</span> Vitalis</a>

...并将背景颜色更改为“黄色”。

如果这在 JavaScript 中更容易完成，我也会接受。

预先感谢您的帮助。

Answer 1

由于您使用的是内联绑定(bind)，因此您应该在函数调用中传递 this，以便您可以访问单击了哪个元素。但是，我强烈建议您研究动态绑定(bind)。

function highlightEntities(element) {
  $("."+ element.id).css("backgroundColor", "yellow");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="Guilhem_Vidal_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem Vidal</li>
</ul>

<a href="http://somefoosite/Guilhem_Vidal_MSP-AU" class="change_link_colour Guilhem_Vidal_MSP-AU">W<span class="supplied">illelmum</span> Vitalis</a>