javascript - 将图标从未填写更改为已填写

Question

我正在尝试在单击时更改列表中最喜欢的图标。

点击前的图标

点击后的图标

当我单击第一个未填充的图标时，我希望能够更改它并填充它。

我已经尝试了几件事，但似乎都行不通，我知道这是一项简单的任务，我只是不想再浪费时间去弄清楚它。有人对如何执行此操作有任何建议吗？

我尝试过的

尝试 1:

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

尝试 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;
    }
});

Answer 1

元素i在里面<a>而不是 <a> 的下一个元素(兄弟) ,

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

如果您需要在后续点击时切换图标，请使用:

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

---

编辑(答案):

如果你的点击事件绑定(bind)在addToFavourite上

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

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