Проверьте, есть ли у div все четыре класса

Question

В основном это фильтр для wordpress.

Все сообщения показаны на одной странице, и я добавил имена категорий в качестве классов в основной div (.box) сообщения, где один div будет иметь несколько классов.

В окне фильтра есть четыре выпадающих списка со всеми категориями, перечисленными в качестве параметров.

Я хотел показать только тот div, который имеет все активные имена категорий в качестве классов.

Ниже приведен код. С условием IF, как я могу использовать идею «И»?

Этот код дает мне ошибку.

$('#filter select').change(function() 
    { 
      var upper=$('#upper').val(); 
      var sole=$('#sole').val(); 
      var toe=$('#toe').val(); 
      var midsole=$('#midsole').val(); 

      $('.box').each(function() 
      { 

       if($(this).hasClass(upper) && hasClass(sole) && hasClass(toe) && hasClass(midsole)) 
       { 
        $(this).show(); 
       } 
       else{ 
        $(this).hide(); 
       } 
    }); 

}); 

Answer 1

Вы можете использовать $.fn.filter метод, как это с комбинированным классом, выбранным:

$('#filter select').change(function() { 
    var upper = $('#upper').val(); 
    var sole = $('#sole').val(); 
    var toe = $('#toe').val(); 
    var midsole = $('#midsole').val(); 

    var classes = '.' + [upper, sole, toe, midsole].join('.'); 
    $('.box').hide().filter(classes).show(); 
}); 

В принципе, конструкция '.' + [upper, sole, toe, midsole].join('.') производит строку из четырех классов сцепляются с . характером: .class1.class2.class3.class4, который является селектором CSS для .box элемент, имеющий все 4 класса одновременно.

Answer 2

Вы забыли $(this) к hasClass.

if($(this).hasClass(upper) && $(this).hasClass(sole) && $(this).hasClass(toe) && $(this).hasClass(midsole)) { 
    // Yes this div has all four classes 
} 

Answer 3

var ele=$(this); 

if(ele.hasClass(upper) && ele.hasClass(sole) && ele.hasClass(toe) && ele.hasClass(midsole)) 

1. Вы должны дать $(this) всем .hasClass API в, если состояние.
2. Поэтому вместо того, чтобы повторять, присвойте его переменной и используйте ее, как указано выше.

Answer 4

Ваш забытый объект jquery selector $(this).

if ($(this).hasClass(upper) && $(this).hasClass(sole) && $(this).hasClass(toe) && $(this).hasClass(midsole)) { 
     ... 
    } 

Answer 5

Вы можете использовать this.hasClass("class1 class2 class3"), если Вы уверены, что для того, еще

this.hasClass("class1) && this.hasClass("class2 ") 

Answer 6

Более красивый способ сделать это:. $ ("# MyId") есть ("foo.bar.")

Edit: это также зависит от порядка классов