我必须根据某些标准在两个图标之间切换。我如何在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");
}
// ...
}
答案 0 :(得分:0)
单击的锚元素没有添加类,其子跨度为:
function myfunction($this) {
$($this).find('span').toggleClass('fa-train fa-car');
}
答案 1 :(得分:0)
做这样的事情
$('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');
}});
答案 2 :(得分:0)
你正在使用它来检查a标签是否有类。你应该检查标签旁边的范围。你应该像这样使用
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");
}
// ...
}
答案 3 :(得分:0)
条件为一行:
$($this)
.addClass((condition=(Math.random() > .5)) ? 'fa-car' : 'fa-train')
.removeClass(condition ? 'fa-train': 'fa-car')
注意:如果您"use strict"
,这将无效。当然,您的代码可读性较差。
答案 4 :(得分:0)
谢谢大家,是的,我必须搜索&#39; span&#39;并添加切换类。 hasClass也是事先检查类是否存在的好方法。
答案 5 :(得分:0)
这是我提出的一个概念,有点逻辑。而不是使用复杂的语言,它的作用是在显示隐藏的消息时隐藏添加按钮并创建一个时间按钮。这是相当简单的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>