Блог

Главная - Вопросы по программированию - Отображение / скрытие Div на основе атрибута данных

Отображение / скрытие Div на основе атрибута данных

#javascript

#javascript

Вопрос:

Я пытаюсь скрыть элементы, которые имеют определенные атрибуты данных, но при этом возникают проблемы. В этом случае я пытаюсь скрыть сделки или купоны на основе нажатий кнопки пользователем. Также пытаюсь показать все на основе show all.

Может кто-нибудь, пожалуйста, помочь с тем, что я делаю неправильно.

Код здесь

 function showdeals(dealtype) {
		if (dealtype == "all") {
			$('div[data-deal-type="deal"]').show();
			$('div[data-deal-type="coupon"]').show();

		}
		if (dealtype == "deal") {
			$('div[data-deal-type="deal"]').hide();
			$('div[data-deal-type="coupon"]').show();
		}
		else if (dealtype == "coupon") {
			$('div[data-deal-type="deal"]').show();
			$('div[data-deal-type="coupon"]').hide();
		}
	}  
 <button onclick="showdeals('all')">
Show All 
</button>
<button onclick="showdeals('deal')">
Show Deals
</button>
<button onclick="showdeals('coupon')">
Show coupons 
</button>




<div id="536739" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx=""> Coupon1 </div>

<div id="536738" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx=""> coupon2 </div>

<div id="536737" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx=""> Deal1 </div>

<div id="536736" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx=""> deal2 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Комментарии:

1. Попробуйте запустить свой фрагмент. (Действительно, действительно нужно проверить их, прежде чем публиковать свой вопрос.)

2. Я исправил это для вас.

3. Голосование за закрытие как опечатку / невоспроизводимость. Просто условие обратное.

Ответ №1:

У вас просто есть свои условия в обратном порядке. Вы скрываете сделки, когда вы должны их показывать, и наоборот, и то же самое для купонов.

 if (dealtype == "all") {
    $('div[data-deal-type="deal"]').show();
    $('div[data-deal-type="coupon"]').show();
}
if (dealtype == "deal") {
    $('div[data-deal-type="deal"]').hide();       // Should show
    $('div[data-deal-type="coupon"]').show();     // Should hide
}
else if (dealtype == "coupon") {
    $('div[data-deal-type="deal"]').show();       // Should hide
    $('div[data-deal-type="coupon"]').hide();     // Should show
}

(Вы могли бы использовать другой else , хотя на самом деле это не имеет значения.)

Тем не менее, вы можете сделать это проще:

 function showdeals(dealtype) {
  $('div[data-deal-type="deal"]').toggle(
    dealtype == "all" || dealtype == "deal"
  );
  $('div[data-deal-type="coupon"]').toggle(
    dealtype == "all" || dealtype == "coupon"
  );
}
  

 function showdeals(dealtype) {
  $('div[data-deal-type="deal"]').toggle(
    dealtype == "all" || dealtype == "deal"
  );
  $('div[data-deal-type="coupon"]').toggle(
    dealtype == "all" || dealtype == "coupon"
  );
}  
 <button onclick="showdeals('all')">
  Show All
</button>
<button onclick="showdeals('deal')">
  Show Deals
</button>
<button onclick="showdeals('coupon')">
  Show coupons
</button>




<div id="536739" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx="">Coupon1</div>

<div id="536738" class="coupon-modal" data-deal-type="coupon" data-discount-type="data-coupon-rank=" xxx="">coupon2</div>

<div id="536737" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx="">Deal1</div>

<div id="536736" class="coupon-modal" data-deal-type="deal" data-discount-type="data-coupon-rank=" xxx="">deal2</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>