我可以恢复 removeClass className.match 删除的以前的类吗？

Question

我需要通过单击“列表视图”按钮从不同的标签中删除一些类，并通过单击“网格视图”按钮恢复之前删除的类；可以这样做吗？

谢谢

        $(document).ready(function() {

$("#addClass").click(function () {
          $('#restoreclass').addClass('previousclasses');
            });
          
            $("#removeClass").click(function () {
        
          $(".products").removeClass (function (index, className) {
            return (className.match (/(^|\s)columns-\S+/g) || []).join(' ');
        });
        
      $("#wc-column-container").removeClass (function (index, className) {
            return (className.match (/(^|\s)wc-\S+/g) || []).join(' ');
        });
      
            });
    
        });     

   <input id="addClass" type="button" value="Grid View" />
   <input id="removeClass" type="button" value="List View" />  

Answer 1

您可以在删除它们之前将类名存储在数据属性中，并在单击“网格视图”按钮时恢复它们：

$(document).ready(function() {

  $("#addClass").click(function() {
    $(".products, #wc-column-container").each(function() {
      let prev = $(this).attr("data-previous");
      prev = prev.replace(/\,/g, '').trim();
      $(this).addClass(prev).removeAttr("data-previous");
    });
  });

  $("#removeClass").click(function() {
    $(".products").removeClass(function(index, className) {
      let classNames = className.match(/(^|\s)columns-\S+/g);
      $(this).attr("data-previous", classNames);
      return (className.match(/(^|\s)columns-\S+/g) || []).join(' ');
    });

    $("#wc-column-container").removeClass(function(index, className) {
      let classNames = className.match(/(^|\s)wc-\S+/g);
      $(this).attr("data-previous", classNames);
      return (className.match(/(^|\s)wc-\S+/g) || []).join(' ');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="addClass" type="button" value="Grid View" />
<input id="removeClass" type="button" value="List View" />
<div class="products columns-a columns-b">
Products
</div>
<div id="wc-column-container" class="wc-a wc-b">
Example
</div>