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

Question

我有一个项目列表，每个项目都有一个不同的id(JS fiddlehttps://jsfiddle.net/r45gjykw/2/)。用户可以单击列表中的一个项目，使用onclick，JQuery将获取元素的id值，并使其成为变量字符串。此字符串值用于更改class:中携带该值的任何元素的cssbackground-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

由于您使用的是内联绑定，因此应该在函数调用中传递this，这样您就可以访问单击的元素。但是，我强烈建议您动态地研究绑定。

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>

Answer 2

您遇到的问题是this在您正在处理的块内不工作，您应该自动使用在函数内传递的元素，只需将函数代码更改为下面的代码即可。试试这个？

function highlightEntities(el) {
let entclass = $(el.target).attr(`id`);
$(`.${entclass}`).css(`background-color`, `yellow`);
}

以下是jsfiddle中的一个工作示例https://jsfiddle.net/xpvt214o/978927/