当我单击其中一个 div 时，图标会发生变化并且它保持更改状态 我想要它，当我再次单击它以更改回原来的样子并取消选择自身时，有什么方法可以在不更改代码的情况下进行更改建议？
function myFunction() {
var element = document.getElementById("demo");
element.classList.toggle("change");
}
function myFunction1() {
var element = document.getElementById("demo1");
element.classList.toggle("change");
}
function myFunction2() {
var element = document.getElementById("demo2");
element.classList.toggle("change");
}
$('.column1').click(function() {
var collapsed = $(this).find('i').hasClass('fas fa-check');
$('.example-class').find('i').removeClass('fas fa-check-circle');
$('.example-class').find('i').addClass('fas fa-check');
if (collapsed)
$(this).find('i').toggleClass('fas fa-check fas fa-check-circle')
});.change {
border-color: blue;
color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div id="demo" onclick="myFunction()" class="column1">
<i class="fas fa-check"></i>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div id="demo1" onclick="myFunction1()" class="column1">
<i class="fas fa-check"></i>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div id="demo2" onclick="myFunction2()" class="column1 clk">
<i class="fas fa-check"></i>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>最简单的jQuery解决方案
$('.column1').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
您不需要函数或单独的 id 只需要一个公共类
$('.column1').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});/* Usefull CSS */
.column1.active{
color:blue;
border: 1px solid blue;
}
.fs5::before{
content:'\f00c';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.active .fs5::before{
content:'\f058';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/* Just Some random CSS */
.column1 {
display: flex;
align-items: center;
margin-bottom: 5px;
padding: 0 5px
}
.column1 * {
margin-right: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div class="column1">
<span class="fs5"></span>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div class="column1 active">
<span class="fs5"></span>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div class="column1">
<span class="fs5"></span>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句