jQuery: Change an attribute value through variable

Question

How would you change a attribute value when you're trying to initially set the attribute to a variable:

<div class="random" aria-expanded="false">
  ...
</div>

// setting the attribute value to variable `getAttrValue`
var getAttrValue = $('.random').attr("aria-expanded");


if ( getAttrValue == "false" ) {
  // try to set the aria-expanded to true
} else {
  // try to set the aria-expanded to false
}

I can do it like this:

if ( getAttrValue == false ) {
  $('.random').attr("aria-expanded", "true");
} else {
  $('.random').attr("aria-expanded", "false");
}

But I was trying to see if I can utilize the variable and shorten the coding

Tyler Roper · Accepted Answer · 2017-07-05 13:43:22Z

1

Store $('.random') as a variable to avoid repeated DOM queries. Each time you do $('.random'), jQuery searches the DOM for items that fit your selector. Instead, you can do it once and store it in a variable. Not only does it shorten your code, but it makes it run faster.

Because your attributes are going to be string values, you'll need to do a string comparison.

var $r = $(".random");
var getAttrValue = $r.attr("aria-expanded");
$r.attr("aria-expanded", getAttrValue=="false");

By using == (Equality Operator), the expression getAttrValue=="false" will evaluate to true or false.

edited Jul 5, 2017 at 13:43

answered Jun 30, 2017 at 20:05

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

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

3 Comments

hellomello Over a year ago

I had to change the boolean to actual strings, if I did the ! logical NOT operator, is it supposed to know to switch between "true" and "false"? even though these boolean are actual strings?

hellomello Over a year ago

If it just does getAttrValue=="false", how does it go back to "true"? is this supposed to toggle?

Tyler Roper Over a year ago

It will set it to the opposite of what it currently is. Think about it... x == "false" will return true if x is "false", and false if x is "true".

Rafael Gadotti Bachovas · Accepted Answer · 2017-06-30 20:03:31Z

0

$('.random').attr("aria-expanded", getAttrValue == false);

answered Jun 30, 2017 at 20:03

Rafael Gadotti Bachovas

4034 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery: Change an attribute value through variable

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related