Javascript 将图标从未填充更改为已填充

我试图在单击时更改列表中的收藏夹图标

单击前的图标

单击后的图标

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

我试过几次，但似乎都不管用，我知道这是一项简单的任务，我不想再浪费时间去想办法了。有人对如何做到这一点有什么建议吗

我尝试过的

尝试1:

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

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

尝试2:

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

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

---

.next

返回紧跟其后的兄弟姐妹，但在您的情况下，它不是兄弟姐妹，而是子兄弟姐妹，因此使用

.children

代替

。next

。next

返回紧跟其后的兄弟姐妹姐妹，但在您的情况下，它不是兄弟姐妹，它的子元素因此使用

.children

而不是

.next

元素

i

在

内部，而不是

的下一个元素（兄弟元素）

如果需要在后续单击时切换图标，请使用：

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

---

编辑（回答）：

如果您的点击事件绑定在

addToFavourite

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

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

---

元素

i

位于

内部，而不是

的下一个元素（同级元素）

如果需要在后续单击时切换图标，请使用：

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

---

编辑（回答）：

如果您的点击事件绑定在

addToFavourite

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

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

用这个

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

或者，如果您想让它变得简单，请在addToFavourite上添加一个click事件，并使其同时切换

$('.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'); 
    }
})

用这个

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

或者，如果您想让它变得简单，请在addToFavourite上添加一个click事件，并使其同时切换

$('.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'); 
    }
})

---

@DipeshRana更新了问题，包括htmlOn，点击事件处理的是哪个元素？行应该是

$（this）.最近的（'a'）。查找（'i.glyphicon-star'）

@ShaunakD我已经更新了我的问题以显示单击的event@DipeshRana更新了问题，包括htmlOn，点击事件处理的是哪个元素？这行应该是

$（this）.最近的（'a'）.find（'i.glyphicon-star'）

@ShaunakD我已经更新了我的问题以显示单击的事件我得到了“Uncaught SyntaxError:Unexpected token invalic”，我正试图使用这行“$（this）.最近的（'a'）。children（'glyphicon'）。removeClass（'glyphicon-star'）。addCla‌​ss（'glyphicon-star-empty'）；“它正在手动提供意外的tokenWrite.addClass（'glyphicon-star-empty'），因为从代码中复制它时会添加一些Bullet。我得到了“未捕获的语法错误：意外的token非法”。我正在尝试使用此行“$（this）。最近的（'a'）。children（'glyphicon'）。removeClass（'glyphicon-star'）。addCla‌​ss（'glyphicon-star-empty'）；“它正在手动提供意外的tokenWrite.addClass（'glyphicon-star-empty'），因为从代码复制时会添加一些项目。这似乎不起作用，我已经更新了我的问题，以向您展示代码在单击事件中的外观。它有我正在使用的代码检查我上面答案中的编辑版本。它应该工作得很理想。你能详细说明什么不起作用吗？toggleClass可以工作，但我不想切换这个类。我需要全班同学留在那里，直到他们需要将其从收藏夹列表中删除。“$（this）.closest（'a'）.find（'i.glyphicon'）.removeClass（'glyphicon-star'）.addClass（'glyphicon-star-empty'）；”这行代码似乎没有填充星星您是否尝试过

$（this）.removeClass（'glyphicon-star-empty'）.addClass（'glyphicon-star'）内部
案例“服务器”
？哦，我想我解决了这个问题。检查更新的答案。您试图添加空类而不是非空类。更改了删除和添加的顺序<代码>$（this）.removeClass（'glyphicon-star-empty'）.addClass（'glyphicon-star'）这似乎不起作用，我已经更新了我的问题，向您展示了代码在单击事件中的外观。它有我正在使用的代码检查我上面答案中的编辑版本。它应该工作得很理想。你能详细说明什么不起作用吗？toggleClass可以工作，但我不想切换这个类。我需要全班同学留在那里，直到他们需要将其从收藏夹列表中删除。“$（this）.closest（'a'）.find（'i.glyphicon'）.removeClass（'glyphicon-star'）.addClass（'glyphicon-star-empty'）；”这行代码似乎没有填充星星您是否尝试过
$（this）.removeClass（'glyphicon-star-empty'）.addClass（'glyphicon-star'）内部
案例“服务器”
？哦，我想我解决了这个问题。检查更新的答案。您试图添加空类而不是非空类。更改了删除和添加的顺序<代码>$（this）.removeClass（'glyphicon-star-empty'）.addClass（'glyphicon-star'）