CODEWITHSUNDEEP
javascriptjqueryhtml
fraser dale
fraser dale

Reputation: 1377

Jquery toggle add classes

I have a jquery function the first part works however the second part with the same logic does not. In the second half i want the the classes to be switched again. please let me know if you need more of the code. New to Jquery. Thanks

<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>

Upvotes: 0

Views: 95

Answers (6)

Gagan Bhatia
Gagan Bhatia

Reputation: 1

    $(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

Upvotes: 0

prasanth
prasanth

Reputation: 22490

Simply try with toggleClass and Conditional (ternary) Operator .Its same as your code working

$(".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>

Upvotes: 1

brk
brk

Reputation: 50291

Though the solution is already provided, but alternatively you can try to target the button class instead of GBP or 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>

Upvotes: 0

XYZ
XYZ

Reputation: 4480

$(".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>

Check the current class and change the text and class name

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Check the following line:

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

by this you are changing the class dynamically, so to deal with dynamic class use .on() like:

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

Note: $(document).on() works for dynamic html also.

Upvotes: 0

guradio
guradio

Reputation: 15555

$(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. Use event delegation for jquery use .on()

Upvotes: 4

Related Questions