gpt4 book ai didi

javascript - 单击时替换 Font Awesome 5 图标的 jQuery 问题?

转载 作者:行者123 更新时间:2023-12-03 02:25:19 24 4
gpt4 key购买 nike

我正在尝试使用 Font Awesome 5 将播放按钮更改为暂停按钮。我不明白为什么它似乎只是不点击切换。它可以识别点击(我尝试使用警报,因此它可以识别我按下按钮本身的时间),但它只是找不到其中的元素并更改它。

这是我的代码:

$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>

最佳答案

您的代码的主要问题是您使用的 Font Awesome 5 将 i 元素更改为 svg,因此您的代码将无法工作。

你有两个解决方案:

最简单的方法是使用 Font Awesome 5 的 CSS 版本,您将能够保持代码不变:

$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>

另一个解决方案是更改代码以处理 SVG。因此,您可以使用所需的图标更改生成的 svg 的 data-icon 属性:

$(".startButton").on('click',function() {
$(this).find('svg').attr("data-icon",'pause-circle');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>

关于javascript - 单击时替换 Font Awesome 5 图标的 jQuery 问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48978501/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com