CODEWITHSUNDEEP
javascriptjquerycsshtml
YaBCK
YaBCK

Reputation: 3029

Change icon from not filled to filled in

I'm trying to change favourite icon on my list when clicked.

Icon before clicked

enter image description here

Icon after clicked

enter image description here

When I click the first Icon when it's not filled in, I want to be able to change it and have it filled in.

I've tried a couple of things and it just doesn't seem to work, I know this is a simple task and I just don't want to waste any more time trying to figure it out. Has anyone got any suggestions on how to do this?

What i've tried

Try 1:

$(this).closest('a').next('i').remove();
$(this).closest('a').append("Appended the item");

Try 2:

$(this).closest('a').next('i').removeClass('glyphicon-star').addClass('glyphicon-star-empty');

html

<li>
   <a class="selectNavigationBTN active">
      <i class="fa fa-dashboard fa-fw selectNavigationBTNIcon"></i> 
      <span class="selectNavigationBTNIcon">Server</span>
      <i class="glyphicon glyphicon glyphicon-star pull-right addToFavourite"></i>
   </a>
</li>

JavaScript

$(document).on('click', '.addToFavourite', function ()
{
    // Check to see what the text value is on the button
    var buttonValue = $(this).closest('a')[0].innerText;

    // Switch depending on the value of which button is clicked
    switch (buttonValue)
    {
    case " Server":
        // Save server link to favourites
        SaveToFavouriteLinkFile("serverBTNFav", "Server");
        $(this).closest('a').find('i.glyphicon').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
        break;
    case " Group":
        // Save group link to favourites
        SaveToFavouriteLinkFile("groupBTNFav", "Group");
        break;
    case " User":
        // Save user link to favourites
        SaveToFavouriteLinkFile("userBTNFav", "User");
        break;
    case " Sync":
        // Save sync link to favourites
        SaveToFavouriteLinkFile("syncBTNFav", "Sync");
        break;
    case " Patient Listing":
        // Save patient listing link to favourites
        SaveToFavouriteLinkFile("PatientListBTNFav", "Patient Listing");
        break;
    case " App Settings":
        // Save app settings link to favourites
        SaveToFavouriteLinkFile("AppSettingsBTNFav", "App Settings");
        break;
    case " Logging":
        // Save logging to favourites
        SaveToFavouriteLinkFile("LoggingBTNFav", "Logging");
        break;
    }
});

Upvotes: 0

Views: 804

Answers (3)

Shaunak D
Shaunak D

Reputation: 20636

The element i is inside <a> and not the next element(sibling) of <a>,

$(this).closest('a')
       .find('i.glyphicon')
       .removeClass('glyphicon-star')
       .addClass('glyphicon-star-empty');

If you need to toggle the icons on subsequent clicks, use:

$(this).closest('a')
       .find('i.glyphicon')
       .toggleClass('glyphicon-star glyphicon-star-empty');

Edit (Answer) :

If your click event is bound on addToFavourite

$(document).on('click', '.addToFavourite', function (){ 

    ...
    case " Server" :
        $(this).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
        //or $(this).toggleClass('glyphicon-star glyphicon-star-empty');
    ...
});

Upvotes: 5

Lau
Lau

Reputation: 282

Use this

$(this).closest('a').children('.glyphicon').removeClass('glyphicon-star').addClass('glyphicon-star-empty');

Or if you want to make it simple add a click event on the addToFavourite and make it also toggle 

$('.addToFavourite').click(function(){ 
    if($(this).hasClass('glyphicon-star')){
      $(this).removeClass('glyphicon-star').addCla‌​ss('glyphicon-star-empty'); 
    }else{
     $(this).removeClass('glyphicon-star-empty').addCla‌​ss('glyphicon-star'); 
    }
})

Upvotes: 0

Dipesh Rana
Dipesh Rana

Reputation: 367

.next returns the immediately following sibling, but in your case , its not sibling , its child so use .children instead .next

Upvotes: 0

Related Questions