Question

当用户点击标题时，我想将子元素的类更改为“fa fa-minus-circle”

<div class="case-study-header">
<i class="fa fa-plus-circle"></i> Case Study Header </div>

代码

 $('.case-study-header').click(function(){
           var state  = $('.case-study-header').children().attr('class');
           state.replace("fa fa-plus-circle", "fa fa-minus-circle");
            });

Answer 1

 $('.case-study-header').click(function(){
     $('.case-study-header').children().attr('class', 'fa fa-minus-circle');         
  });

再次设置，它会自动覆盖。

Answer 2

你有几个问题：

将repalce更改为replace。
将整个逻辑更改为更简单的东西。

我想你可能需要这个：

$('.case-study-header').click(function(){
  var state  = $('.case-study-header').children().attr('class');
  state.replace("fa fa-plus-circle", "fa fa-minus-circle");
});

而不是上述内容，请使用：

$('.case-study-header').click(function () {
    $('.case-study-header').children().attr('class', 'fa fa-minus-circle');         
});

Answer 3

您可以使用.toggleClass()

＆＃13;

$('.case-study-header').click(function() {
  $(this).children('i').toggleClass('fa-plus-circle fa-minus-circle');
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="case-study-header">
  <i class="fa fa-plus-circle"></i> Case Study Header
</div>

＆＃13;

Answer 4

您可以使用toggleClass方法，如下所示：

$('.case-study-header').click(function(){
       var state  = $('.case-study-header').children().toggleClass('class', 'fa-plus-circle fa-minus-circle');         
        });

Answer 5

试试这个：选择所有拥有fa-plus-circle或fa-minus-circle并切换课程的孩子。

$('.case-study-header').click(function(){
   var $children = $('.case-study-header').children('.fa-plus-circle, .fa-minus-circle');
   $children.toggleClass('class', 'fa-plus-circle fa-minus-circle');         
});

如何在jquery中访问子元素的类？

5 个答案: