我正在尝试制作一个可切换的 anchor 标签,直到现在实现了这个我希望它在点击时切换 fa 图标和文本。到目前为止 fa 图标切换但无法切换文本任何人都可以告诉我如何去做。
html
<h5 class="text-muted"> Education <a id="btnExp" class="fa fa-plus">ADD</a> </h5>
JS
$('h5 #btnExp').on('click', function () {
$("h5 #btnExp").toggleClass("fa fa-minus fa fa-plus");
$("#btnExp").text("123");
});
最佳答案
您需要阻止其默认操作,因为元素是 anchor 。还将您的代码包装在 document-ready handler 中.
$(document).ready(function() {
$('h5 #btnExp').on('click', function() {
$("h5 #btnExp").toggleClass("fa fa-minus fa fa-plus");
$(this).text($(this).text() === '123' ? 'ADD' : '123'); //Also toggle text
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5 class="text-muted"> Education <a id="btnExp" class="fa fa-plus">ADD</a> </h5>
关于jquery .text() 无法点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26338214/