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

我试图解决的问题是：

编写函数newMessage，该函数接收主题名称作为参数。函数应将 p 标签的背景颜色更改为红色，其中数据主题名称为 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]使用的选择器是正确的吗？

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

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

Example:

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>