时间戳

首页 > 解决方案 > 如何使用jquery添加和删除元素的类

javascript - 如何使用jquery添加和删除元素的类

问题描述

我创建了一个轮播，其中包含一个播放/暂停按钮。我正在使用引导程序并添加了以下代码。

<button class="btn btn-danger btn-small" id="carousel-button">
                        <span class="fa fa-pause"></span>
                    </button>

查询：

$(document).ready(function() {
            $("#carousel-button").click(function() {
                if ($("#carousel-button").children("span").hasClass('fa-pause')) {
                    $("#mycarousel").carousel('pause');
                    $("#carousel-button").children("span").removeClass('fa-pause');
                    $("#carousel-button").children("span").addClass('fa-play');
                } else if ($("#carousel-button").children("span").hasClass('fa-play')) {
                    $("#mycarousel").carousel('cycle');
                    $("#carousel-button").children("span").removeClass('fa-play');
                    $("#carousel-button").children("span").addClass('fa-pause');
                }
            });
        });

我不明白哪里出错了，为什么点击后按钮不会改变。

标签： javascriptjquery

解决方案

您可能没有添加所需的所有引用，或者引用库的顺序不正确：

$(document).ready(function() {
  $("#carousel-button").click(function() {
    if ($("#carousel-button").children("span").hasClass('fa-pause')) {
        $("#mycarousel").carousel('pause');
        $("#carousel-button").children("span").removeClass('fa-pause');
        $("#carousel-button").children("span").addClass('fa-play');
    } else if ($("#carousel-button").children("span").hasClass('fa-play')) {
        $("#mycarousel").carousel('cycle');
        $("#carousel-button").children("span").removeClass('fa-play');
        $("#carousel-button").children("span").addClass('fa-pause');
    }
  });
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button class="btn btn-danger btn-small" id="carousel-button">
    <span class="fa fa-pause"></span>
</button>

推荐阅读