CODEWITHSUNDEEP
jqueryjquery-mobile
Nick LaMarca
Nick LaMarca

Reputation: 8188

Change The Background Color Of A Button On The Fly Jquery Mobile

I have created a style 

.someRedStuff
{
 background:red !important;
}

I want to change the color of the star icon to red when the button is clicked

 <a data-role="button" data-iconpos= "notext" data-icon="star" id="custom-li-3" onclick="changeColor()"></a>

I tried this code but it does not seem to be doing the trick..

  function changeColor()
        {          
            $('#custom - li - 3').removeClass('ui-icon-star').addClass('someRedStuff');
        }

How do I change the color of the star icon on click?

Upvotes: 0

Views: 2841

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85318

Does this work:

JS

$('#custom-li-3').on('click', function(event){
    $(this).toggleClass('someRedStuff');
});

HTML

<div data-role="page" class="type-home">

   <div data-role="content">
      <a data-role="button" data-iconpos= "notext" data-icon="star" id="custom-li-3"></a>
   </div>
</div>​

CSS

.someRedStuff
{
 background:red !important;
}

Upvotes: 0

Gabe
Gabe

Reputation: 50493

Your element selector has spaces it. Removes the spaces in the selector to match the id declared for the element.

$('#custom-li-3').removeClass('ui-icon-star').addClass('someRedStuff');

Upvotes: 2

Related Questions