CODEWITHSUNDEEP
jqueryhtmltoggleclass
sasan mohammadi
sasan mohammadi

Reputation: 85

jquery change class of a span inside a button on click

I have a button as follows and I want to change the class name of span on it. But the following code is not working. How can I do that?

<button id="btn_new">
<span class="ui-icon ui-icon-plus"></span>new
</button>

jquery code:

$('#btn_new').click(function({
   $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

also i tried this:

$('#btn_new').click(function({
   $(this).find('span').removeClass('ui-icon-plus').addClass('ui-icon-tick');
});

Upvotes: 1

Views: 11171

Answers (9)

sasan mohammadi
sasan mohammadi

Reputation: 85

thank you evrey one: its working . my mistake was that i changed the button text and when span was inside the button, my code remove span and add new text on it. i put another span and now its working.

my html:

 <button id="btn_new"><span class="ui-icon ui-icon-plus"></span><span>new</span></button>

my jquery:

$('#btn_new").click(function(){
   var caption=$(this).find('span:last').text();
   if(caption =='new'){
      $(this+'span:last').text('save');
      $(this+'span:first').toggleClass('ui-icon-plus ui-icon-tick');
   }
}

Upvotes: 0

Muhammad Atif
Muhammad Atif

Reputation: 1102

$('#btn_new').click(function(e){
   e.preventDefault();   
   var caption=$.trim($(this).text());
   var icon=$(this).find('span');
   if(caption == 'new'){ 
    $(this).text('save'); 
    icon.toggleClass('ui-icon-plus ui-icon-check'); 
   } 
});

Upvotes: 0

kapil darji
kapil darji

Reputation: 111

Please try this:

$('#btn_new').click(function(){
  $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

Upvotes: 0

KloppForKop
KloppForKop

Reputation: 114

well you can try removeClass and addClass like this

$('#btn_new').click(function({ 
      $(this).find('span').removeClass('ui-icon-plus');
      $(this).find('span').addClass('ui-icon-tick');
});

Upvotes: 5

SDK
SDK

Reputation: 1542

I tried here but with different class

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_new").click(function(){
   $(this).find('span').toggleClass('main');
});
});
</script>
<style>
.main {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>
<button type="button" id="btn_new">
<span class="main">new</span>
</button>

</body>
</html>

And its working

Upvotes: 0

maulik sakhare
maulik sakhare

Reputation: 2047

Please try this

$(document).ready(function(){
    $('#btn_new').click(function(){
    $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
    });
});

also please don't forget to add

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

if not added

Upvotes: 0

user1087079
user1087079

Reputation: 1356

$('#btn_new').click(function(){
   $(this).find('span').toggleClass('ui-icon-plus').toggleClass('ui-icon-tick');
});

Upvotes: 0

Insane Skull
Insane Skull

Reputation: 9358

Working Fiddle

$('#btn_new').click(function(){

   $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

Upvotes: 3

ketan
ketan

Reputation: 19341

You forget to close bracket in click event. function()

$('#btn_new').click(function(){ //Here
   $(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});

Working Fiddle

Upvotes: 0

Related Questions