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

Posted 2023-03-16

【中文标题】我可以恢复 removeClass className.match 删除的以前的类吗？

【英文标题】：Can I restore previous class removed by removeClass className.match?

【发布时间】：2020-10-17 11:54:03

【问题描述】：

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

谢谢

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

【问题讨论】：

请使用minimal reproducible example，其余的 html 代码和 CSS 不仅仅是按钮。我不明白你想达到什么目的。

【参考方案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>

【讨论】：

嗨，我认为prev = prev.replace(",", "").trim(); 中可能有一个错误，因为当我恢复它时，这些类似乎用逗号分隔 class="wc-columns-container, wc-columns-3, wc-tablet- columns-2, wc-mobile-columns-1"，你能帮忙吗？谢谢

@AlessioAngeloro 我刚刚调整了答案，所以所有逗号都被替换为空字符串。

对不起，我不是 JS 的专家，我必须删除哪个逗号？谢谢。

@AlessioAngeloro 您不必删除逗号，我在回答中调整了 prev = prev.replace(",","").trim(); with prev = prev.replace(/\,/g, '').trim();所以所有的逗号都会被处理，而不仅仅是第一个。