javascript - 使用 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类got，将类icon-play更改为icon-pause

我正在使用此代码，但不起作用。

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

Answer 1

我们这里没有任何图标，因此我正在更改背景颜色来演示切换您所需的类。

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

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

.icon-play{    
   background:#ddd;    
}

.icon-pause{
     background:#fdc847;
}

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

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