使用 jQuery 创建后反应

Question

我正在尝试生成具有后审功能的 jQuery 代码。 我要创建的内容如下图所示：

每次单击时，喜欢和不喜欢按钮都会突出显示。 反应将使用 localStorage 存储在本地。

这是我的 HTML 代码：

<div class="reaction-post" data-id="123456">
      <div class="like" data-title="like">Like</div>
      <div class="dislike" data-title="dislike">Dislike</div>
</div>

这是我的 jQuery 代码：

$(function(){
    $('.reaction-post div').click(function(){
        var lod = $(this).attr('data-title');
        var idr = $('.reaction-post').attr('data-id');       
        localStorage.setItem(idr,lod);
        var ratinghis = localStorage.getItem(idr);
        $('.reaction-post').addClass(ratinghis);     
    });
});

我的问题是单击另一个选项后我不知道如何删除类。

Answer 1

好吧，您可以在“click”处理程序的开头添加类似这样的内容：

$(".reaction-post").removeClass("不喜欢");

这将在单击喜欢/不喜欢按钮时将所有“喜欢”或“不喜欢”class 删除到 your.reaction-post，然后您的脚本会根据单击的按钮应用一个新的。

注意：如果您的页面 (DOM) 上有很多这样的元素（很多喜欢和不喜欢按钮），您可能希望将 class 操作限制为单击的元素。

编辑：您的代码可能如下所示（未经测试，但您明白了）：

<script>
$(function(){
    $('.reaction-post div').click(function(){
        var likable_element = $(this).parent(); //the .reaction-post, easier to manager multiple likeable element on the same page
        likable_element.removeClass("dislike like");
        
        var lod = $(this).attr('data-title');
        var idr = likable_element.attr('data-id');       
        localStorage.setItem(idr,lod);
        var ratinghis = localStorage.getItem(idr);
        likable_element.addClass(ratinghis);     
    });
});
</script>