CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jay
Jay

Reputation: 161

Edit div class name on click

So basically I have a bunch of nav buttons that I want to change the name of when the user clicks the button.

The original div class name is something like "home", and when the user clicks on it I want it to be "home_active" so that the CSS attributes will change the background-image.

$('.click').click(function() {
  var clicked_url = $(this).attr('class');
  var updated_url = clicked_url + "_active";
  $(this).attr('class') = updated_url;
});
.item_active {
  background-color: teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

Upvotes: 1

Views: 704

Answers (6)

zer00ne
zer00ne

Reputation: 43880

Not sure where class .click is but there is .item and .click(...) method is ok -- I prefer to use .on('click', ...) (see the difference between .click() and .on()).

$('.item').on('click', function() {...

Since objective is to simply change the style of a clicked link by changing its class then it's better to assign a common class (which was done: .item) and a class that sets the state (a separate class: .active).

$(this).toggleClass('active');

If you wish to apply this to additional tags, simply modify the outer selector

$('.item, :button').on('click', function() {...

The selector above will listen for clicks on anything with the class .item and any <button> and <input type='button'> tags.

It wasn't very clear what the desired behavior was so there's two demos:

Demo 1: Click any link to add/remove .active class

or

Demo 2: Click any link to add/remove .active class exclusively

Demo 1

Click any link to add/remove .active class

$('.item').on('click', function() {
  $(this).toggleClass('active');
});
.active {
  background-color: teal;
  color: white
}
<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Demo 2

Click any link to add/remove .active class exclusively

$('.item').on('click', function() {
  $(this).toggleClass('active');
  $('.item').not(this).removeClass('active');
});
.active {
  background-color: teal;
  color: white
}
<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

symlink
symlink

Reputation: 12209

Couple things. First, you want to select elements with a class name of "item," not "click." Secondly, you were using the attr() function wrong. Instead of attr('class') = var, you want to set the var as the second parameter, e.g. attr('class', var).

Edit: Finally, you should check in your click event whether or not the link has been previously clicked (i.e. whether it already has the "_active" suffix):

$('.item').click(function() {
    var clicked_url = $(this).attr('class');
    var updated_url;
    if(clicked_url.includes("_active")){
        updated_url = "item";
    }else{
       updated_url = "item_active";
    }
    $(this).attr('class', updated_url);
});
.item_active {
  background-color: teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

Almost there - but remember to use attr to reset the class value. And you most likely want to remove _active from the other .click elements, so this is the only one.

$(".click").click(function() {
  $(".click").each(function() {
    $(this).attr("class", $(this).attr("class").replace(/_active/, ""));
  });
  $(this).attr("class", $(this).attr("class") + "_active");
});

Upvotes: 1

Greg
Greg

Reputation: 1003

You shall use the .addClass() method add a class to the element:

$('.click').click(function() {
    var clicked_url = $(this).attr('class');
    var updated_url = clicked_url + "_active";
    $(this).removeClass(clicked_url); // remove the old class
    $(this).addClass(updated_url); // add the new class
});

However, as a good practice, it is better to add a modifier class, such as "active" to the existing class, preserving the original class name.

Then use the following CSS:

.click.active {
    background: red;
}

The JS code would look like this:

$('.click').click(function() {
    $('.click.active').removeClass('active'); // remove active class from all other nav items
    $(this).addClass('active'); // add active to the nav item the users just clicked on
});

Upvotes: 2

SimoMatavulj
SimoMatavulj

Reputation: 584

$('.click').click(function() {
var clicked_url = $(this).attr('class');
var updated_url = clicked_url + "_active";
$(this).removeClass(updated_url)
$(this).addClass(updated_url)});

Upvotes: 1

nAviD
nAviD

Reputation: 3261

Using Jquery functions:

$(this).hasClass("className");
$(this).addClass("className");
$(this).removeClass("className");

Upvotes: 1

Related Questions