jQuery切換添加類

Question

我有一個jQuery函數，第一部分工作，但是具有相同邏輯的第二部分卻沒有。 在下半年，我希望再次切換類。 如果您需要更多代碼，請告訴我。 jQuery的新手。 謝謝

<script>
</div>
<button class="button GBP" id="conv_currency">Change to £GBP</button>
</div>

    $(".GBP").click(function(){
    if (document.getElementById("conv_currency").className == "button GBP") {
        document.getElementById("conv_currency").innerHTML = "Change to $USD";
        $(".GBP").removeClass("GBP").addClass("USD");
    }
    });

$(".USD").click(function(){
   if(document.getElementById("conv_currency").className == "button USD") {
        document.getElementById("conv_currency").innerHTML = "Change to £GBP";
       $(".USD").removeClass("USD").addClass("GBP");
    }
});
</script>

Answer 1

 $(document).on('click',".GBP",function(){ if (document.getElementById("conv_currency").className == "button GBP") { document.getElementById("conv_currency").innerHTML = "Change to $USD"; $(".GBP").removeClass("GBP").addClass("USD"); } }); $(document).on('click',".USD",function(){ if(document.getElementById("conv_currency").className == "button USD") { document.getElementById("conv_currency").innerHTML = "Change to £GBP"; $(".USD").removeClass("USD").addClass("GBP"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </div> <button class="button GBP" id="conv_currency">Change to £GBP</button> </div> 

1. 將事件委派用於jquery使用.on()

Answer 2

只需嘗試使用toggleClass和Conditional (ternary) Operator

 $(".button").click(function() { $(this).html($(this).hasClass("GBP") ? "Change to $USD" : "Change to £GBP").toggleClass("USD GBP") console.log($(this).attr('class')) }); 

 .USD {color: red;} .GBP {color: green;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button GBP" id="conv_currency">Change to £GBP</button> 

Answer 3

檢查以下行：

$(".GBP").removeClass("GBP").addClass("USD");

這樣，您就可以動態更改類，因此要使用.on()來處理動態類，例如：

$(document).on('click',".GBP",function(){

注意： $(document).on()適用於動態html。

Answer 4

 $(".button").click(function(){ if($(this).hasClass("USD")){ $(this).text("Change to £GBP").removeClass('USD').addClass("GBP"); }else if($(this).hasClass("GBP")){ $(this).text("Change to $USD").removeClass('GBP').addClass("USD"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </div> <button class="button GBP" id="conv_currency">Change to £GBP</button> </div> 

檢查當前班級並更改文本和班級名稱

Answer 5

盡管已經提供了解決方案，但是您也可以嘗試定位button類而不是GBP或USD 。

 $(".button").click(function() { if ($(this).hasClass('GBP')) { $(this).removeClass('GBP').addClass('USD').text('Change to £USD') } else if ($(this).hasClass('USD')) { $(this).removeClass('USD').addClass('GBP').text('Change to $GBP') } }) 

 .GBP { color: red; } .USD { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </div> <button class="button GBP" id="conv_currency">Change to £GBP</button> </div> 

Answer 6

    $(document).on('click',".button",function(){
            $(this).toggleClass("GBP").toggleClass("USD");
            if($(this).text() == "Change to £GBP"){
                $(this).text("Change to USD");
            }
            else{
                $(this).text("Change to £GBP");
            }
        });

// OR you can also this

$(document).on('click',".button",function(){
        $(this).toggleClass("GBP").toggleClass("USD");
        if($(this).hasClass("USD")){
            $(this).text("Change to USD");
        }
        else{
            $(this).text("Change to £GBP");
        }
    });

//choices is yours