[英]How to toggle between 2 icons
I have to toggle between two icons based on some criteria.我必须根据某些标准在两个图标之间切换。 How do I do this in jQuery?
我如何在 jQuery 中做到这一点?
<a href='' id="home" onclick="myfunction(this)" data-toggle="toggle">
<span class="fa fa-train"></span>
</a>
myfunction($this) {
// ...
if ($($this).hasClass("fa fa-train")) {
$($this).removeClass("fa fa-train");
$($this).addClass("fa fa-car");
}
else {
$($this).addClass("fa fa-car");
$($this).addClass("fa fa-train");
}
// ...
}
clicked anchor element do not have class added, its child span does :单击的锚元素没有添加类,它的子跨度有:
function myfunction($this) {
$($this).find('span').toggleClass('fa-train fa-car');
}
Do something like this做这样的事情
$('a#home').on('click', function(){
var childSpan = $(this).find('span');
if(childSpan.hasClass('fa-train')){
childSpan.removeClass('fa-train');
childSpan.addClass('fa-car');
}
else if(childSpan.hasClass('fa-car')){
childSpan.removeClass('fa-car');
childSpan.addClass('fa-train');
}});
you are using this which will check the a tag if has class .您正在使用它,它将检查 a 标签是否有 class 。 while you should check in the span next to a tag .you should use like this
而你应该检查标签旁边的跨度。你应该像这样使用
myfunction($this) {
// ...
if ($($this).next('span').hasClass("fa fa-train")) {
$($this).next('span').removeClass("fa fa-train");
$($this).next('span').addClass("fa fa-car");
}
else {
$($this).next('span').addClass("fa fa-car");
$($this).next('span').addClass("fa fa-train");
}
// ...
}
With a condition in one line:在一行中有一个条件:
$($this)
.addClass((condition=(Math.random() > .5)) ? 'fa-car' : 'fa-train')
.removeClass(condition ? 'fa-train': 'fa-car')
Note: This will not work if you "use strict"
and of course your code will be less readable.注意:如果您
"use strict"
,这将不起作用,当然您的代码可读性会降低。
Thanks everyone, yes i had to search for 'span' and add toggle class.谢谢大家,是的,我必须搜索“跨度”并添加切换类。 hasClass is also good way to check beforehand that the class exist or not.
hasClass 也是预先检查该类是否存在的好方法。
This is a concept that I came with which is a bit logical.这是我提出的一个有点合乎逻辑的概念。 Instead of using complicated language, what this does is it hides the add button and makes a times button while showing the message that was hidden.
它没有使用复杂的语言,而是隐藏了添加按钮并在显示隐藏的消息的同时制作了一个时间按钮。 It is fairly simple JQuery.
这是相当简单的JQuery。
$(document).ready(function() { $("#addCross").click(function() { document.getElementById("addCross").style.display = "none"; document.getElementById("addAdd").style.display = "inline-block"; document.getElementById("hello").style.display = "block"; }); $("#addAdd").click(function() { document.getElementById("addCross").style.display = "inline-block"; document.getElementById("addAdd").style.display = "none"; document.getElementById("hello").style.display = "none"; }); });
/* Unoptional CSS Just to make the buttons look better in the snippet. */ button { background: transparent; border: none; } button:focus { outline: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://kit.fontawesome.com/9b271ce18a.js" crossorigin="anonymous"></script> <div> <label>Press the Button: </label> <button id="addCross"><i class="fas fa-plus"></i> <button id="addAdd" style="display: none;"><i class="fas fa-times"></i></button> <div style="display: none;" id="hello"> <p>Hello. I was hidden by the Magic of JQuery.</p> <label>This design also makes a cool rotating add sign if you look closely. Ha Ha!!</label> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.