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 的div的 author 类，然后将 authornew 类添加到对象中。

Answer 2

更新了解决方案：

如果您只想在.author事件中将.author课程从.authornew切换到.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的：

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

toggle()的工作示例：http://jsfiddle.net/zydJd/

一个简单的条件示例是：

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

$（this）将引用相关对象，即$('.author')。

或者只是进行更改：

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

Answer 3

您可以使用addClass和removeClass jQuery方法：

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

Answer 4

jQuery toggleClass也很有用。

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

每次调用时，这将在author和authornew之间切换类。它的工作原理是删除现有的和添加不存在的。如果最初存在一个，那么每次调用它时它将在两者之间切换。

在内部，jQuery对传入的类名进行字符串拆分以隔离每个名称，然后对于您传递的每个className，它对其执行hasClass，如果为true，则执行removeClass，如果不为true，则执行addClass。 / p>

Answer 5

这与您之前的问题有关。我已经在上一个问题的答案中添加了这个内容......

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

Javascript或Jquery更改类onclick？

5 个答案: