使用if-else陳述句在單擊時隱藏顯示div和添加洗掉類

我需要多個具有通用類名稱的 div，它們需要在單擊時“隱藏顯示”。'Up-Arrow/Down-Arrow' href css也需要做相應的修改。

我首先將<a href>跨度附加到我的目標 div 并.hide()在默認情況下將其設定為類“ArrowUp”。

var TrainArrowUp = $('<a href="#" ></a>')
var TrainArrowDown = $('<a href="#" ></a>')
$(".TrainTransportHeading").append(TrainArrowUp);
$(".TrainContainer").hide()

然后，我添加了一個帶有 if-else 陳述句的點擊函式，該陳述句標識了 div 的類名，并如下進行相應的更改。

$(document).on('click', '.Train' , function() {
    var TrainArrowClass = $(this).attr("class").split(" ").join("")

    if (TrainArrowClass == "TrainArrowUp") {
        $(".TrainContainer").show()
        $(".TrainArrow").addClass('ArrowDown').removeClass('ArrowUp');
    }
    else if (TrainArrowClass == "TrainArrowDown") {
        $(".TrainContainer").hide()
        $(".TrainArrow").addClass('ArrowUp').removeClass('ArrowDown');
    }
});

但是，這只能作業一次，而不是按要求回圈。我在這里錯過了什么？

下面是完整的作業代碼：

顯示代碼片段

jQuery(document).ready(function($) {

  var TrainArrowUp = $('<a href="#" ></a>')
  var TrainArrowDown = $('<a href="#" ></a>')
  $(".TrainTransportHeading").append(TrainArrowUp);
  $(".TrainContainer").hide()


  $(document).on('click', '.Train', function() {
    var TrainArrowClass = $(this).attr("class").split(" ").join("")

    if (TrainArrowClass == "TrainArrowUp") {
      $(".TrainContainer").show()
      $(".TrainArrow").addClass('ArrowDown').removeClass('ArrowUp');
    } else if (TrainArrowClass == "TrainArrowDown") {
      $(".TrainContainer").hide()
      $(".TrainArrow").addClass('ArrowUp').removeClass('ArrowDown');
    }
  });

});

.ArrowUp {
  display: flex;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.ArrowDown {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.TrainOuterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 80%;
  border-style: solid;
  border-color: rgb(58, 146, 7);
  border-width: 0.5px 0.5px 0.5px 0.5px;
}

.OptionNumber {
  display: flex;
  flex-basis: content;
  background-color: rgb(58, 146, 7);
  width: 100%;
  color: white;
  padding: 1px;
  margin: auto;
  margin-top: 0px;
  align-content: center;
}

.TotalTravelTime {
  display: flex;
  width: 100%;
  background-color: rgb(75, 13, 243);
  color: white;
  padding: 1px;
  margin: auto;
  margin-bottom: 0px;
  align-self: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
  </tr>

</table>

uj5u.com熱心網友回復：

由于您使用的是 jQuery，您可以簡單地執行以下操作：

if ($(".Train").hasClass('ArrowUp')) {
  $(".TrainContainer").show()
  $(".Train").addClass('ArrowDown').removeClass('ArrowUp');
} else {
  $(".TrainContainer").hide()
  $(".Train").addClass('ArrowUp').removeClass('ArrowDown');
}

使用hasClass()jQuery的方法。

顯示代碼片段

jQuery(document).ready(function($) {

  var TrainArrowUp = $('<a href="#" ></a>')
  $(".TrainTransportHeading").append(TrainArrowUp);
  $(".TrainContainer").hide()


  $(document).on('click', '.Train', function() {
    if ($(".Train").hasClass('ArrowUp')) {
      $(".TrainContainer").show()
      $(".Train").addClass('ArrowDown').removeClass('ArrowUp');
    } else {
      $(".TrainContainer").hide()
      $(".Train").addClass('ArrowUp').removeClass('ArrowDown');
    }
  });
});

.ArrowUp {
  display: flex;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.ArrowDown {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.TrainOuterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 80%;
  border-style: solid;
  border-color: rgb(58, 146, 7);
  border-width: 0.5px 0.5px 0.5px 0.5px;
}

.OptionNumber {
  display: flex;
  flex-basis: content;
  background-color: rgb(58, 146, 7);
  width: 100%;
  color: white;
  padding: 1px;
  margin: auto;
  margin-top: 0px;
  align-content: center;
}

.TotalTravelTime {
  display: flex;
  width: 100%;
  background-color: rgb(75, 13, 243);
  color: white;
  padding: 1px;
  margin: auto;
  margin-bottom: 0px;
  align-self: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
  </tr>

</table>

標籤：查询 if 语句

上一篇：curl:(3)URL使用錯誤/非法格式或缺少URL-檢查回應代碼

下一篇：自動單元格參考