Массив из дивов jQuery

324
17 февраля 2019, 18:20

Мне надо чтобы при выборе определеной опции в селекте, показывался определенный див с контентом, а остальные дивы с контентом не отображались. Написал такой код, но это полное г хотя и работает. Поправьте пожалуйста, не могу понять логику, как сделать чтобы была нормальная функция и массивы, если я конечно в правильном направлении мыслю.

 <script> 
      $('#select').on('change', function() { 
  var value = $(this).val(); 
  if (value == 'wwwsel') { 
    $('#www').css('display', 'inherit'); 
    $('#regular').css('display', 'none'); 
    $('#banners').css('display', 'none'); 
    $('#adult').css('display', 'none'); 
    $('#eshop').css('display', 'none'); 
  } 
  if (value == 'eshopsel') { 
    $('#eshop').css('display', 'inherit'); 
    $('#regular').css('display', 'none'); 
    $('#banners').css('display', 'none'); 
    $('#adult').css('display', 'none'); 
    $('#www').css('display', 'none'); 
  } 
  if (value == 'bannerssel') { 
    $('#banners').css('display', 'inherit'); 
    $('#regular').css('display', 'none'); 
    $('#www').css('display', 'none'); 
    $('#adult').css('display', 'none'); 
    $('#eshop').css('display', 'none'); 
  } 
  if (value == 'adultsel') { 
    $('#adult').css('display', 'inherit'); 
    $('#regular').css('display', 'none'); 
    $('#banners').css('display', 'none'); 
    $('#www').css('display', 'none'); 
    $('#eshop').css('display', 'none'); 
  } 
  if (value == 'regularsel') { 
    $('#regular').css('display', 'inherit'); 
    $('#www').css('display', 'none'); 
    $('#banners').css('display', 'none'); 
    $('#adult').css('display', 'none'); 
    $('#eshop').css('display', 'none'); 
  } 
}); 
    </script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="works"> 
<select id="select"> 
	<option value="wwwsel"><a class="dropdown-item" href="">WWW</a></option> 
	<option value="eshopsel"><a class="dropdown-item" href="">E-SHOP</a></option> 
	<option value="bannerssel"><a class="dropdown-item" href="">BANNERS</a></option> 
	<option value="adultsel"><a class="dropdown-item" href="">ADULT</a></option> 
	<option value="regularsel" selected><a class="dropdown-item" href="">REGULAR</a></option> 
</select> 
</div> 
</div> 
</div> 
 <div id="gallery-thumbs" class="row"> 
  <div style="display: inherit;" class="row" id="regular"> 
   <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  </div> 
  <div style="display: none;" class="row" id="eshop"> 
   <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  </div> 
  <div style="display: none;" class="row" id="www"> 
   <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  </div> 
  <div style="display: none;" class="row" id="banners"> 
   <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  </div> 
  <div style="display: none;" class="row" id="adult"> 
   <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/render1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
          <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  </div> 
</div> 
<div class="views"><a href="portfolio.html" class="more">VIEW MORE</a></div> 
</div> 
<div class="arch container-fluid"> 
	<div class="row"> 
		<div class="arch_field"> 
		<a href="architecture.html"><img class="img-responsive" src="img/arch.png"></a> 
	    </div> 
	</div> 
</div>

Answer 1

$('#select').on('change', function() { 
  var value = $(this).val(); 
  $("#gallery-thumbs > .row").addClass("hidden"); 
  $("#" + value).removeClass("hidden"); 
}); 
$('#select').change();
.hidden { 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="works"> 
  <select id="select"> 
    <option value="www"><a class="dropdown-item" href="">WWW</a></option> 
    <option value="eshop"><a class="dropdown-item" href="">E-SHOP</a></option> 
    <option value="banners"><a class="dropdown-item" href="">BANNERS</a></option> 
    <option value="adult"><a class="dropdown-item" href="">ADULT</a></option> 
    <option value="regular" selected><a class="dropdown-item" href="">REGULAR</a></option> 
  </select> 
</div> 
</div> 
</div> 
<div id="gallery-thumbs" class="row"> 
  <div class="row" id="regular">regular 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  regular</div> 
  <div class="row" id="eshop">eshop 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  eshop</div> 
  <div class="row" id="www">www 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  www</div> 
  <div class="row" id="banners">banners 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  banners</div> 
  <div class="row" id="adult">adult 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/render1.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work2.png" class="img-responsive"> 
      </div> 
    </div> 
    <div class="col-md-4 item"> 
      <div class="thumbnail"> 
        <img src="img/work3.png" class="img-responsive"> 
      </div> 
    </div> 
  adult</div> 
</div> 
 
<div class="views"><a href="portfolio.html" class="more">VIEW MORE</a></div> 
</div> 
<div class="arch container-fluid"> 
  <div class="row"> 
    <div class="arch_field"> 
      <a href="architecture.html"><img class="img-responsive" src="img/arch.png"></a> 
    </div> 
  </div> 
</div>

Answer 2
$('#select').on('change', function() {
    var value = $(this).val();
    // дивы должны иметь класс по которому вы можете их выбрать все и спрятать
    // на текущий момент это класс `row` но вы можете добавить какой-то специфический
    // чтобы не выбрать другие НЕнужные элементы с таким же классом
    $('.row').css('display', 'none');     
    $('#' + value).css('display', 'inherit');
});
ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте optima-pr.com.ua
ТОП-10
READ ALSO
Обнулить эвент после выполнения
jQuery

Обнулить эвент после выполнения

Мне надо чтобы после того как функция по нажатию на кнопку отработала, без перезагрузки страницы, воспользоваться ей еще раз в других дивах...

 188
Custom Control c# WPF
c#

Custom Control c# WPF

Как сделать Custom Control как PasswordBox где слева от passwordboxa будет textblock(значок замка или другой символ)Тоесть объеденить passwordbox и textblock в 1 control

 297
Как конвертировать строку из парсера в число C#
c#

Как конвертировать строку из парсера в число C#

Вопрос 1: Через парсер получаем строку "10д 5ч"(10 дней и 5 часов) Надо ее конвертировать и получить время в часах (10*24+5) и получить число 245

 155
Ввод без перехода на следующую строку C#
c#

Ввод без перехода на следующую строку C#

Я хочу сделать, чтоб при вводе данных в C# не выполнялся переход на новую строку в консоли, это возможно? Например, чтоб консоль выглядела не так:

 198