How to target specific attribute with a certain value in jQuery? [duplicate]

Question

The problem I am trying to solve is this:

Write the function newMessage, which receives the name of the topic as the parameter. Function should change the background-color of the p tag to red where the data-topic-name is topicName.

For example, if the HTML is:

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

After calling newMessage("discussion") the HTML should be:

<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>

Now, I thought I had it when I used the following:

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

unfortunately it does not work.

I thought p[data-topic-name = topicName] was the correct selector to use?

topicName in your selector is a string, not the variable you are passing — empiric
– empiric, Commented Sep 4, 2019 at 13:27

j08691 · Accepted Answer · 2019-09-04 13:27:20Z

4

You're on the right track but you need to move the variable name outside of your quotes like:

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>

answered Sep 4, 2019 at 13:27

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JoyFulCode Over a year ago

Thank you. Is the +variableName+ the way variables are passed in jQuery selectors?

j08691 Over a year ago

It's the most common way yes

Collectives™ on Stack Overflow

How to target specific attribute with a certain value in jQuery? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related