jquery 仅为特定元素设置点击cookie

rt4zxlrg  于 2023-06-05  发布在  jQuery
关注(0)|答案(1)|浏览(91)

我试图添加一个类,当我点击一个元素,并通过使用jQuery/javascript通过cookie页面加载后保持它。
这是我目前为止得到的,它给了它特定的点击元素的类,但当然在页面加载后不会保留它:

jQuery("a.action.towishlist").click(function(){
    jQuery(this).addClass("wishlisttest");
    localStorage.setItem('btnClicked', true);
 });


jQuery(document).ready(function (){
    var clicked = localStorage.getItem("btnClicked");
    if(clicked){
       jQuery(this).addClass("wishlisttest");
    }
});

有多个元素具有相同的名称和类,因此没有ID。我可以使用data.post属性,它具有唯一的ID。

<a href="#" class="action towishlist" data-post="{"action":"https:\/\/www.domain.com\/se\/wishlist\/index\/add\/","data":{"product":3766,"uenc":"aHR0cHM6Ly93d3cucG9zdGVyeS5jb20vanAvcG9zdGVycw,,"}}" data-action="add-to-wishlist" role="button"></a>

如何设置cookie来识别单击的元素并保留类?
编辑:更新平台后,我知道目标data-product-sku="1234"有一个新的cleaner属性

e3bfsja2

e3bfsja21#

您可以做的是将按钮唯一的部分保存在data-post中,然后在想要恢复状态时循环按钮以检查此值,如下所示:

  • 您可以使用数组存储单击的值,但必须使用JSON将其存储在localStorage中
  • 考虑到data-post属性的复杂性,我认为最好循环所有按钮并检索它,并进行比较,而不是使用属性查询选择器,因为您可能会遇到特殊字符转义的问题
  • 出于测试目的,我使用简单引号'更正了data-post。如果你发布的是真实的的属性,你可能会遇到这样的问题,你不能在一个已经用双引号分隔的属性中使用双引号
jQuery("a.action.towishlist").click(function(){
    jQuery(this).addClass("wishlisttest");
    
    //getting storage value, defaults to empty array if not set
    var clickedButtons = localStorage.getItem("btnClicked");
    if(!clickedButtons){
      clickedButtons = [];
    }else{
      clickedButtons = JSON.parse(clickedButtons);
    }
    
    //getting the product from data-post attribute which is JSON too
    var dataPost = jQuery(this).data('post');
    if(dataPost){
      dataPost = JSON.parse(dataPost);
      var productId = dataPost.data.product;
      
      //if not in array, push it
      if(clickedButtons.indexOf(productId) < 0){
        clickedButtons.push(productId);
      }
    }
    
    //re-format to JSON then store it
    clickedButtons = JSON.stringify(clickedButtons);
    localStorage.setItem('btnClicked', clickedButtons);
});


jQuery(document).ready(function (){
    //getting storage value, defaults to empty array if not set
    var clickedButtons = localStorage.getItem("btnClicked");
    if(!clickedButtons){
      clickedButtons = [];
    }else{
      clickedButtons = JSON.parse(clickedButtons);
    }
    
    //loop on all buttons, decode the attribute and test if in the saved array
    jQuery("a.action.towishlist").each(function(){
      //getting the product from data-post attribute which is JSON too
      var dataPost = jQuery(this).data('post');
      if(dataPost){
        dataPost = JSON.parse(dataPost);
        var productId = dataPost.data.product;

        //if in array, add class to the button
        if(clickedButtons.indexOf(productId) > -1){
          jQuery(this).addClass("wishlisttest");
        }
      }
    });
});

//TODO: add code to clear localStorage item when cart is cleared of some other condition
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="action towishlist" data-post='{"action":"https:\/\/www.domain.com\/se\/wishlist\/index\/add\/","data":{"product":3766,"uenc":"aHR0cHM6Ly93d3cucG9zdGVyeS5jb20vanAvcG9zdGVycw,,"}}' data-action="add-to-wishlist" role="button"></a>
<a href="#" class="action towishlist" data-post='{"action":"https:\/\/www.domain.com\/se\/wishlist\/index\/add\/","data":{"product":3767,"uenc":"aHR0cHM6Ly93d3cucG9zdGVyeS5jb20vanAvcG9zdGVycw,,"}}' data-action="add-to-wishlist" role="button"></a>
<a href="#" class="action towishlist" data-post='{"action":"https:\/\/www.domain.com\/se\/wishlist\/index\/add\/","data":{"product":3768,"uenc":"aHR0cHM6Ly93d3cucG9zdGVyeS5jb20vanAvcG9zdGVycw,,"}}' data-action="add-to-wishlist" role="button"></a>

EDIT:如果你有一个属性的唯一值是一个简单的类型(数字/字母数字id),你可以跳过JSON解码部分:

jQuery("a.action.towishlist").click(function(){
    jQuery(this).addClass("wishlisttest");
    
    //getting storage value, defaults to empty array if not set
    var clickedButtons = localStorage.getItem("btnClicked");
    if(!clickedButtons){
      clickedButtons = [];
    }else{
      clickedButtons = JSON.parse(clickedButtons);
    }
    
    //getting the product from data-post attribute which is JSON too
    var productSku = jQuery(this).data('product-sku');
    if(productSku && clickedButtons.indexOf(productSku) < 0){
      clickedButtons.push(productSku);
    }
    
    //re-format to JSON then store it
    clickedButtons = JSON.stringify(clickedButtons);
    localStorage.setItem('btnClicked', clickedButtons);
});


jQuery(document).ready(function (){
    //getting storage value, defaults to empty array if not set
    var clickedButtons = localStorage.getItem("btnClicked");
    if(!clickedButtons){
      clickedButtons = [];
    }else{
      clickedButtons = JSON.parse(clickedButtons);
    }
    
    //loop on all buttons, decode the attribute and test if in the saved array
    jQuery("a.action.towishlist").each(function(){
      //getting the product from data-post attribute which is JSON too
      var productSku = jQuery(this).data('product-sku');
      if(productSku && clickedButtons.indexOf(productSku) > -1){
        jQuery(this).addClass("wishlisttest");
      }
    });
});

//TODO: add code to clear localStorage item when cart is cleared of some other condition
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="action towishlist" data-product-sku="1" data-action="add-to-wishlist" role="button"></a>
<a href="#" class="action towishlist" data-product-sku="2"  data-action="add-to-wishlist" role="button"></a>
<a href="#" class="action towishlist" data-product-sku="3"  data-action="add-to-wishlist" role="button"></a>

相关问题