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");
    });
});

如何使用jquery，以便在按下一个图块时，其他图块将恢复为自然状态

2 个答案: