我已经创建了一个旋转木马，其中包含了一个播放/暂停按钮。 我正在使用bootstrap，并添加了以下代码。
<button class="btn btn-danger btn-small" id="carousel-button">
<span class="fa fa-pause"></span>
</button>
jQuery:
$(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');
}
});
});
我不明白哪里出错了，为什么按钮点击后不会改变。
您可能没有添加所需的所有引用，或者引用库的顺序不正确:
null
$(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>