Yura_Mart
@Yura_Mart

Как скрыть определенные элементы, с повторяющимися id, в определенном блоке при использовании change(), если этих блоков может быть много?

Всем привет, подскажите пожалуйста!

С помощью php выводятся <div class="category_div"> в неограниченных количестваx, но внутри всегда есть:
1.
<select class="form-control" name="main_cat" id="main_cat"></select>

2. <div id="div_sub_cat_lvl_1">
3. <div id="div_sub_cat_lvl_2">
4. <div id="div_sub_cat_lvl_3">
5. <div id="div_sub_cat_lvl_4">
например:
<div class="category_div">
      <label class="floating-label">Выберите категорию</label>
      <select class="form-control" name="main_cat" id="main_cat">
           <option value=""></option>
      </select>
      <div id="div_sub_cat_lvl_1">
              <label class="control-label mb-10">Подкатегория 1 уровня</label>
              <select name="sub_cat_lvl_1" id="sub_cat_lvl_1">
                    <option value="1">Значение 1</option>
              </select>
      </div>
      <div id="div_sub_cat_lvl_2">
              <label class="control-label mb-10">Подкатегория 2 уровня</label>
              <select name="sub_cat_lvl_2" id="sub_cat_lvl_2">
                  <option value="2">Значение 2</option>
              </select>
      </div>
      <div id="div_sub_cat_lvl_3">
               <label class="control-label mb-10">Подкатегория 3 уровня</label>
               <select name="sub_cat_lvl_3" id="sub_cat_lvl_3">
                   <option value="3">Значение 3</option>
               </select>
      </div>
      <div id="div_sub_cat_lvl_4">
               <label class="control-label mb-10">Подкатегория 4 уровня</label>
               <select name="sub_cat_lvl_4" id="sub_cat_lvl_4">
                    <option value="4">Значение 4</option>
               </select>
       </div>
</div>

и таких блоков <div class="category_div"> может быть много...

Вопрос в том, как сделать так, чтобы при выборе каждого
<select class="form-control" name="main_cat" id="main_cat"></select>
в каждом <div class="category_div"> прятать все четыре <div id="div_sub_cat_lvl_1,2,3,4"> отдельно?

Накидал решение, но срабатывает только на первом блоке:

$('#main_cat').each(function () {
        $(this).change(function () {
            $("#div_sub_cat_lvl_1").hide();
            $("#div_sub_cat_lvl_2").hide();
            $("#div_sub_cat_lvl_3").hide();
            $("#div_sub_cat_lvl_4").hide();
        });
    })


Есть подозрения что нужно использовать each() или/и this
Знаю что так делать не стоит, но нужно исправить именно то, что есть.
Подскажите, пожалуйста, в чём ошибка?

Вот рабочее решение от пользователя "lavren":

$('.category_div select.form-control').change(function() {
        const parent = $(this).closest('.category_div');
        for(let i = 1; i <= 4; i++){
            parent.find('#div_sub_cat_lvl_' + i).hide();
        }
});
  • Вопрос задан
  • 269 просмотров
Решения вопроса 1
@lavren
Основы говорят что что на странице не должно быть одинаковых ID!

Ошибка в том что получая вот так $("#main_cat").val() всегда берется первый найденый.

Если все элементы сгруппированы то получать их надо внутри своего родителя.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
На одной странице не должно быть элементов с одинаковым id. Это плохо.
Ответ написан
Комментировать
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Лучше проще, чем никогда
На jQuery переписывайте сами, гугл в помощь.

const badMainCats = document.querySelectorAll("#main_cat");

badMainCats.forEach( el => {
  const els = el.querySelectorAll( '*' );
  els.forEach( subEl => {
    subEl.addEventListener('click', e =>{
       console.log( 'clicked!' , e);
    })
  });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы