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。我应该如何修改我的脚本来做到这一点？谢谢!

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>

这应该可以解决问题!

首先，它会删除 div 的 author 类以及 author 类，然后将 authornew 类添加到对象中。