如何使用jquery，以便當一個瓷磚按下時，其他人恢復到他們的自然狀態

Question

我連續有五個瓷磚。當一個瓷磚被按下時，它會被賦予一個方塊陰影。但是，如果在按下平鋪2時按下了平鋪1，則需要平鋪1來丟失箱體陰影。我跳躍使用jQuery來實現這一點。爲了達到這個目標，我需要改變一下我的代碼？這裏是我的代碼：

HTML：

<div class="fltsqrs" id="fltsqrs1"><img src="../images/cash flow.png" alt=" "><p>Treasury Services</p></div> 
    <div class="fltsqrs" id="fltsqrs2"><img src="../images/taxes2.png"><p>Taxes</p></div> 
    <div class="fltsqrs"><img src="../images/Team.png" alt=" "><p>Bookkeeping</p></div> 
    <div class="fltsqrs"><img src="../images/strategy.png" alt=" "><p>Planning</p></div> 
    <div class="fltsqrs"><img src="../images/1449867816_1.png" alt=" "><p>HR Services</p></div> 

JS：

$(document).ready(function() { 
    $('.fltsqrs').click(function(){ 
     $(this).toggleClass("fltsqrs2"); 
    }); 
}); 

CSS：

.fltsqrs { 
    float:left; 
    height:175px; 
    width:185px; 
    background-color:white; 
    margin-right:15px; 
    margin-top:35px; 
    border-radius:30px; 
} 

.fltsqrs2 { 
    box-shadow: 0 0 5px 5px #333333; 
} 

Answer 1

添加fltsqrs2類到一個之前只需切換其他瓷磚關閉你剛剛點擊。你可以用removeClass這樣做，就像這樣。

$('.fltsqrs').removeClass("fltsqrs2"); 

下面是完整的例子

$('.fltsqrs').click(function() { 
 
    $('.fltsqrs').removeClass("fltsqrs2"); 
 
    $(this).toggleClass("fltsqrs2"); 
 
});

.fltsqrs { 
 
    float: left; 
 
    height: 175px; 
 
    width: 185px; 
 
    background-color: white; 
 
    margin-right: 15px; 
 
    margin-top: 35px; 
 
    border-radius: 30px; 
 
} 
 
.fltsqrs2 { 
 
    box-shadow: 0 0 5px 5px #333333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fltsqrs" id="fltsqrs1"> 
 
    <img src="../images/cash flow.png" alt=" "> 
 
    <p>Treasury Services</p> 
 
</div> 
 
<div class="fltsqrs" id="fltsqrs2"> 
 
    <img src="../images/taxes2.png"> 
 
    <p>Taxes</p> 
 
</div> 
 
<div class="fltsqrs"> 
 
    <img src="../images/Team.png" alt=" "> 
 
    <p>Bookkeeping</p> 
 
</div> 
 
<div class="fltsqrs"> 
 
    <img src="../images/strategy.png" alt=" "> 
 
    <p>Planning</p> 
 
</div> 
 
<div class="fltsqrs"> 
 
    <img src="../images/1449867816_1.png" alt=" "> 
 
    <p>HR Services</p> 
 
</div>

Answer 2

現在你的代碼將 「切換」 每一個元素是否是在fltsqrs2類。這意味着如果這些元素不屬於該類別，則會將fltsqrs2添加到其類別屬性列表中。如果該元素已經屬於該類，則將其從類屬性列表中刪除。這接近你想要的。

問題在於原始類fltsqrs未被切換 - 即您的元素始終具有類fltsqrs並且受相應的CSS支配。

總之你需要切換兩個類。試試這個。

$(document).ready(function() { 
    $('.fltsqrs').click(function(){ 
     $(this).toggleClass("fltsqrs fltsqrs2"); 
    }); 
});