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>

使用事件委托进行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

Jquery切换添加类

6 个答案: