Скрыть / показать div на основе более чем значения атрибутов данных в JavaScript / jQuery

Question

У меня есть div как

<div class="item" id="unique_id" data_brand_id="100" data_category_id="10" data_is_promo="1"> </div>
<div class="item" id="unique_id" data_brand_id="100" data_category_id="10" data_is_promo="1"> </div>
<div class="item" id="unique_id" data_brand_id="101" data_category_id="11" data_is_promo="2"> </div>
<div class="item" id="unique_id" data_brand_id="101" data_category_id="11" data_is_promo="2"> </div>

Здесь я могу показать / скрыть, основываясь на значении атрибута, например

$('[data_brand_id="100"]').attr('style', 'display:none;');
$('[data_category_id="10"]').attr('style', 'display:none;'); 
same for attr data_is_promo

, но это похоже на условие ИЛИ. он показывает все DIV, которые имеют идентификатор бренда или идентификатор категории.

Но я хочу скрыть / показать все атрибуты, использующие условие AND. Показать / скрыть все div, у которых есть data_brand_id = 100 AND data_category_id == 10 AND data_is_promo == 1 и скрыть / показать остальные DIV.

У меня есть brand_id и category_id в массиве java.

Как применить условие AND.

Answer 1

Вы можете объединить все селекторы вместе.

$('[data_brand_id="100"][data_category_id="10"]').style('display', 'none;'); 

См .: Множественный селектор атрибутов

Answer 2

Вы можете использовать Выбор нескольких атрибутов [name = "value"] [name2 = "value2"] , что соответствует элементам, которые соответствуют всем указанным фильтрам атрибутов. :

$('[data_brand_id="100"][data_category_id="10"][data_is_promo="1"]').attr('style', 'display:none;');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item" id="tr_3990" data_brand_id="100" data_category_id="10" data_is_promo="1"> 111</div>
<div class="item" id="tr_3990" data_brand_id="100" data_category_id="10" data_is_promo="1">2222 </div>
<div class="item" id="tr_3990" data_brand_id="101" data_category_id="11" data_is_promo="2">33333 </div>
<div class="item" id="tr_3990" data_brand_id="101" data_category_id="11" data_is_promo="2"> 4444</div>

Обратите внимание: Лучше использовать jQuery * .css() при работе со стилем:

$('[data_brand_id="100"][data_category_id="10"][data_is_promo="1"]').css({'display': 'none'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item" id="tr_3990" data_brand_id="100" data_category_id="10" data_is_promo="1"> 111</div>
<div class="item" id="tr_3990" data_brand_id="100" data_category_id="10" data_is_promo="1">2222 </div>
<div class="item" id="tr_3990" data_brand_id="101" data_category_id="11" data_is_promo="2">33333 </div>
<div class="item" id="tr_3990" data_brand_id="101" data_category_id="11" data_is_promo="2"> 4444</div>