使用jQuery更改类不起作用

Question

我有这个HTML：

<div id="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play"></i></a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>

我需要ONCLICK课获得，将课程 icon-play 更改为 icon-pause

我正在使用此代码，但无效。

        $('a.got').click(function() {
            $('i.icon-white').parent().toggleClass('icon-pause');
        });

Answer 1

我们这里没有任何图标，所以我正在改变背景的颜色以演示切换你想要的类。

＆＃13;

＆＃13;

$('.got').on('click',function(){
       $(this).find('.icon-white').toggleClass('icon-play icon-pause');
  
});

＆＃13;

.icon-white{
  margin:0px 20px;
  
  }

.icon-play{    
   background:#ddd;    
}

.icon-pause{
     background:#fdc847;
}

a{
  text-decoration:none;
  color:#999;
  font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play">yourIcon</i>click here (anchor tag having got class)</a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>


<div class="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play">yourIcon</i>click here (anchor tag having got class)</a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>

<div class="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play">yourIcon</i>click here (anchor tag having got class)</a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>

<div class="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play">yourIcon</i>click here (anchor tag having got class)</a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>

<div class="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play">yourIcon</i>click here (anchor tag having got class)</a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>

<div class="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play">yourIcon</i>click here (anchor tag having got class)</a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>


<div class="dowload">
    <a class="got player-frame btn btn-info" href="#" title="watch">
     <i class="icon-white icon-play">yourIcon</i>click here (anchor tag having got class)</a>
    <a class="download-frame btn btn-success" href="#" title="download">
     <i class="icon-white icon-download-alt"></i> Download</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

$('a.mp3z').on('click', function() {
    if($('.icon-white').hasClass('icon-play')) {
         $('.icon-white').removeClass('icon-play').addClass('icon-pause');
    } else {
        $('.icon-white').removeClass('icon-pause').addClass('icon-play');
    }
});