JavascriptまたはJQueryがクラスonclickを変更しますか？

Question

クリックすると.authorから.authornewに変更する必要があります。

私のhtml：

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

マイスクリプト：

<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が上押しidです。 #author-dropdownはドロップダウンの内容です。今、スクリプトはドロップダウンコンテンツidを変更しますが、私は実際に.authorクラスを.authornewに変更する必要があります。これを行うためにスクリプトをどのように修正する必要がありますか？ありがとう！これはトリックを行う必要があります

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

Answer 1

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

：

Answer 2

あなたはaddClassとremoveClass jQueryのメソッドを使用することができます！

まずそのクラス著者であなたのdivの著者クラスを削除し、それがそのオブジェクトにクラスauthornewを追加します。

Answer 3

更新ソリューション：

あなただけ.authorから.authornewに.authorクラスを切り替えたいと戻っ.authorへclick()イベントにしている場合は、あなたがtoggle()機能を利用することができるはずです。

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：toggle()と

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

の作業例：http://jsfiddle.net/zydJd/

簡単な条件の例は次のようになります。

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

どこ$（この）問題のオブジェクトを参照するだろう、すなわち$('.author')。

それとも、その後、変更を行うために：

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

Answer 4

jQueryのtoggleClassはあまりにも便利です。

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

これは作者の間でクラスを切り替えて、あなたはそれを呼び出すたびにauthornewます。存在するものを削除し、存在しないものを追加することによって動作します。最初に存在する場合は、呼び出すたびに2つの間で切り替わります。

内部的に、jQueryは渡されたクラス名を文字列で分割して各名前を分離し、渡した各classNameに対してhasClassを行い、trueの場合はtrue、それ以外の場合はremoveClassを行います。

Answer 5

これは以前の質問にリンクしています。私はまた、それがクラスを変更しますが、それは第二のクリックで、前のクラスに戻ってdoes notの

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