Форум

emptyindorill · #1 (**permalink**) 03.04.2020, 13:05

Добрый день!

Есть такая конструкция:

<div class="recomendation">
 <select id="" name="">
  <option selected="selected" value="01">1</option>
  <option value="02">02</option>
 </select>

 <div class="detail-use__tab" data-id="01" style="display:block;">01 info</div>
 <div class="detail-use__tab" data-id="02">02 info</div>
</div>

Надо что бы при выборе определенной опции, выводился блок у которого dat-id совпадает с value опции.

Пробую так:

$(document).ready(function() {
	$('.recomendation select').change(function(){
		var el = $(this).val();
			  $('.detail-use__tab').css('display','none');
			  $('.detail-use__tab'+el).css('display','block');
			
	});
});

Подскажите пожалуйста, как это правильно сделать? Делаю первый раз, надо ли в var указывать значения?

Спасибо!

рони · #2 (**permalink**) 03.04.2020, 13:39

emptyindorill,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .detail-use__tab  {
      display: none;
  }
  .detail-use__tab.show  {
      display: block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
	$('.recomendation select').change(function(){
		$('[data-id]').each((i, elem) => {
        elem.classList.toggle('show', elem.dataset.id == this.value)
		})

	});
});

  </script>
</head>
<body>
<div class="recomendation">
 <select id="" name="">
  <option selected="selected" value="01">1</option>
  <option value="02">02</option>
 </select>

 <div class="detail-use__tab show" data-id="01">01 info</div>
 <div class="detail-use__tab" data-id="02">02 info</div>
</div>
</body>
</html>

emptyindorill · #3 (**permalink**) 03.04.2020, 14:19

Спасибо большое!!!

Форум

Справочник

Discord чат

Курсы javascript