如何在兩個圖標之間切換

Question

我必須根據某些標准在兩個圖標之間切換。 我如何在 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");
    }

    // ...
}

Answer 1

單擊的錨元素沒有添加類，它的子跨度有：

function myfunction($this) {
  $($this).find('span').toggleClass('fa-train fa-car');
}

Answer 2

做這樣的事情

 $('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');
   }});

Answer 3

您正在使用它，它將檢查 a 標簽是否有 class 。 而你應該檢查標簽旁邊的跨度。你應該像這樣使用

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

    // ...
}

Answer 4

在一行中有一個條件：

$($this)
  .addClass((condition=(Math.random() > .5)) ? 'fa-car' : 'fa-train')
  .removeClass(condition ? 'fa-train': 'fa-car')

注意：如果您"use strict" ，這將不起作用，當然您的代碼可讀性會降低。

Answer 5

謝謝大家，是的，我必須搜索“跨度”並添加切換類。 hasClass 也是預先檢查該類是否存在的好方法。

Answer 6

這是我提出的一個有點合乎邏輯的概念。 它沒有使用復雜的語言，而是隱藏了添加按鈕並在顯示隱藏的消息的同時制作了一個時間按鈕。 這是相當簡單的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>