如何在jQuery中以特定值定位特定属性？ [复制]

Posted 2023-03-05

【中文标题】如何在jQuery中以特定值定位特定属性？ [复制]

【英文标题】：How to target specific attribute with a certain value in jQuery? [duplicate]

【发布时间】：2020-01-07 09:45:07

【问题描述】：

我要解决的问题是：

编写函数newMessage，它接收主题名称作为参数。函数应将 p 标签的背景颜色更改为红色，其中 data-topic-name 为 topicName。

例如，如果 html 是：

<div>
  <p data-topic-name="discussion">General discussion</p>
  <p data-topic-name="bugs">Bugs</p>
  <p data-topic-name="animals">Animals</p>
</div>

调用 newMessage("discussion") 后的 HTML 应该是：

<div>
  <p data-topic-name="discussion" style="background-color: red;">General discussion</p>
  <p data-topic-name="bugs">Bugs</p>
  <p data-topic-name="animals">Animals</p>
</div>

现在，当我使用以下内容时，我以为我拥有它：

function newMessage(topicName) 
  $('p[data-topic-name=topicName]').css('background-color' , 'red')

不幸的是，它不起作用。

我认为p[data-topic-name = topicName] 是正确的选择器吗？

【问题讨论】：

topicName 在您的选择器中是一个字符串，而不是您传递的变量

【参考方案1】：

您在正确的轨道上，但您需要将变量名称移到引号之外，例如：

function newMessage(topicName) 
  $('p[data-topic-name='+topicName+']').css('background-color' , 'red')

例子：

function newMessage(topicName) 
  $('p[data-topic-name='+topicName+']').css('background-color' , 'red')

newMessage('discussion');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p data-topic-name="discussion">General discussion</p>
  <p data-topic-name="bugs">Bugs</p>
  <p data-topic-name="animals">Animals</p>
</div>

【讨论】：

谢谢。 +variableName+ 是 jQuery 选择器中传递变量的方式吗？

这是最常见的方式是的