JQuery单击get element id，使用value作为变量，以目标类更改css背景颜色

我有一个项目列表，每个项目都有一个不同的

id

（jsfiddle）。用户可以单击列表中的一项，然后使用

onclick

JQuery获取元素的

id

值，并将其设置为变量字符串。此字符串值用于更改在

类中携带该值的任何元素的css
背景色
：

因此，点击：

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

应以（例如）的任何实例为例：



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

如果这在JavaScript中更容易实现，我也会接受

提前感谢您的帮助。
您遇到的问题是，
此
在您使用的块中不起作用，您应该使用在函数中自动传递的元素，只需将函数代码更改为下面的代码即可。
试试这个

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

下面是一个JSFIDLE中的工作示例
您遇到的问题是，
此
在您正在使用的块中不起作用，您应该使用在函数中自动传递的元素，只需将函数代码更改为下面的代码即可。
试试这个

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

下面是一个JSFIDLE中的工作示例
因为您使用的是内联绑定，所以应该在函数调用中传入
this
，这样您就可以访问单击的元素。然而，我强烈建议您动态地研究绑定


功能高亮度（元素）{
$（“+element.id）.css（“背景色”、“黄色”）；
}


Guilhem Vidal

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


功能高亮度（元素）{
$（“+element.id）.css（“背景色”、“黄色”）；
}


Guilhem Vidal

我想他指的是原生js，他说的是jquery。如果我没有弄错的话，内联绑定用法将不会引用正确的
this
。此外，这个逻辑是否只用于更改单击的元素？如果是这样，就没有理由去寻找它。该元素可以通过单击处理程序传入。@Taplar，否：它是从
li
元素的html
onclick=“highlighttities（）”
激发的，用于更改其他元素的背景色。我认为JSFIDLE很好地概括了上述问题。不要强迫用户去查看您的问题。您可以通过点击Ctrl+M或点击编辑器中的
按钮来创建一个现场工作示例。我想他指的是原生js，他说的是jquery。如果我没有弄错的话，内联绑定用法将不会引用正确的
this
。此外，这个逻辑是否仅用于更改单击的元素？如果是这样，就没有理由去寻找它。该元素可以通过单击处理程序传入。@Taplar，否：它是从
li
元素的html
onclick=“highlighttities（）”
激发的，用于更改其他元素的背景色。我认为JSFIDLE很好地概括了上述问题。不要强迫用户去查看您的问题。您可以通过按Ctrl+M或单击编辑器中的
按钮来创建现场工作示例。
此.id
与
$（this）.attr（'id'）
相同，只需少调用两次函数。然而，我相信在这种情况下，
this
不是元素存在一个问题，因为它是一个内联绑定。为什么要在答案中链接到fiddle？把解决方案放在你的答案中…虽然这对JS引擎并不重要，但我认为你应该坚持一种类型的引用。不要强迫人们去一个非站点共享站点。让你的答案成为答案。Ctrl+M或单击
，然后将您的解决方案放到站点上。就目前情况而言，这只是半个答案。您在小提琴中的绑定方式（答案中未显示）是实现此功能的一个非常重要的部分。
this.id
将与
$（this.attr（'id'）
相同，只需少两个函数调用。然而，我相信在这种情况下，
this
不是元素存在一个问题，因为它是一个内联绑定。为什么要在答案中链接到fiddle？把解决方案放在你的答案中…虽然这对JS引擎并不重要，但我认为你应该坚持一种类型的引用。不要强迫人们去一个非站点共享站点。让你的答案成为答案。Ctrl+M或单击
，然后将您的解决方案放到站点上。就目前情况而言，这只是半个答案。您在小提琴中绑定的方式（答案中没有显示）是实现此功能的一个非常重要的部分。当我将您的更改应用到小提琴中的整个场景中时，它们不起作用：是否有代码冲突我没有看到？（根据您的建议，我正在尝试将其全部放入原始帖子中的代码片段中）@jbrehr加载顺序。您将javascript设置为“加载”。该函数需要在标记之前存在，因为您正在进行内联绑定。如果你把它改为“头部加载”，它就工作了。现在工作得很好，谢谢。另外，感谢您向我介绍here.Np的代码片段。这有助于每个人都只去一个地方，：）当我把你的更改应用到小提琴的整个场景中时，它们不起作用：是否有我没有看到的代码冲突？（根据你的建议，我正试图在原始帖子中把它全部放进一个代码片段）@jbrehr加载o
function highlightEntities(el) {
        let entclass = $(el.target).attr(`id`);
        $(`.${entclass}`).css(`background-color`, `yellow`);
}