Question

有人可以帮我优化这个Jquery来从DOM中删除一个类列表吗？我所使用的代码，但必须有一种方法可以做到这一点，而无需单独列出每个类。

jQuery(document).ready(function($){
   if(window.innerWidth <= 960) {
      $('.wow').removeClass("wow");
      $('.animated').removeClass("animated");
      $('.bounceInDown').removeClass( 'bounceInDown' );
      $('.slideInLeft').removeClass( 'slideInLeft' );
      $('.slideInRight').removeClass( 'slideInRight' );
      $('.zoomInUp').removeClass( 'zoomInUp' );
   }
});

Answer 1

您可以将所有类列入单个选择器并一次删除所有类，如$('.animated,.bounceInDown,.slideInLeft,.slideInRight,.zoomInUp').removeClass('animated,bounceInDown,slideInLeft,slideInRight,zoomInUp');，但这将删除所有列出的每个选定元素的类，这可能不是您想要完成的。

您可以使用Array.prototype.forEach之类的：

["animated", "bounceInDown", "slideInLeft", "slideInRight", "zoomInUp"].forEach(function (e) {
  $('.' + e).removeClass(e);
});

Answer 2

您可以尝试扩展jQuery：

$.fn.classGoByeBye = function(){
    var selector = this.selector.replace('.', '');
    $(this).each(function(){
        this.classList.remove(selector);
    });
};

//usage:
$('.wow').classGoByeBye();

Answer 3

一种可能的解决方案是将类列表放在一个数组中，然后在您的条件下迭代它们。例如......

if (window.innerWidth <= 960) {
    $.each(['wow', 'animated'], function(index, value) {
        $("." + value).removeClass("." + value);
    });
}

如何在窗口宽度删除类的列表 - Jquery / Javascript

3 个答案: