CODEWITHSUNDEEP
javascriptjqueryclick
funguy
funguy

Reputation: 2160

Javascript or Jquery to change class onclick?

I need to change a class .author to .authornew when I click.

my html:

<div class="meta-info" id="showhide">
    <div class="author"></div>
 <div id="author-dropdown" style="display: none;"></div>

My script:

<script>
$(document).ready(function() {
  $('#showhide').click(function() {
    if($('#author-dropdown').css('display') == 'none') {
      $('#author-dropdown').attr("id","author-dropdown-extended").slideDown();
    } else {
      $('#author-dropdown-extended').attr("id","author-dropdown").slideUp();
    }
    return false;
  });
});
</script>

#showhide is the id to press on. #author-dropdown is the drop down content. Now, the script changes id of drop down content, but I actually need to change class .author to .authornew. How should I amend my script to do this? Thanks!

Upvotes: 0

Views: 2563

Answers (5)

Robert
Robert

Reputation: 8767

Updated solution:

If you are just wanting to toggle the .author class from .author to .authornew and back to .author on the click() event, then you should be able to utilize the toggle() function:

HTML:

<div class="meta-info" id="showhide">     
    <div class="author">1</div>  
    <div id="author-dropdown" style="display: none;">
</div>

CSS:

.author { background: #000; }
.authornew { background: #ccc; }

jQuery:

$('#showhide').click(function() { 
    $('div.author').toggleClass('authornew');
});

Working example with toggle(): http://jsfiddle.net/zydJd/

A simple conditional example would be:

var obj = $(this);
if(obj.hasClass('author')){
    obj.removeClass('author').addClass('authornew');
}else{
    obj.removeClass('authornew').addClass('author');
}

Where $(this) would reference the object in question, i.e. $('.author').

Or to just make the change then:

$('.author').removeClass('author').addClass('authornew');

Upvotes: 2

Jules
Jules

Reputation: 7223

<script>
   $(document).ready(function() {
       $('div#showhide').click(function() {

           //Check if element with class 'author' exists, if so change it to 'authornew'
           if ($('div.author').length != 0)
                $('div.author').removeClass('author').addClass('authornew');
           //Check if element with class 'authornew' exists, if so change it to 'author'
           else if ($('div.authornew').length != 0)
                $('div.authornew').removeClass('authornew').addClass('author');

       });
   });
</script>

This should do the trick!

First it removes the author class of your div with class author, and it then adds the class authornew to the object.

Upvotes: 6

Tom
Tom

Reputation: 12998

This is linked to your previous question. I have added to the answer to your previous question to cover this...

I would like to amend my jquery script to add a different #id

Upvotes: 0

jfriend00
jfriend00

Reputation: 707308

jQuery toggleClass can be useful too.

$('#author-dropdown').toggleClass("author authornew");

This will toggle the class between author and authornew each time you call it. It works by removing either that are present and adding either that are not present. If one is initially present, then it will toggle between the two each time you call it.

Internally, jQuery does a string split on the passed in classnames to isolate each name and then for each className you pass, it does a hasClass on it and if true, it does removeClass, if not true, it does addClass.

Upvotes: 1

Jacob
Jacob

Reputation: 78848

You can use the addClass and removeClass jQuery methods:

$('.author').removeClass('author').addClass('authornew');

Upvotes: 1

Related Questions