Скрыть родительский класс, если установлен флажок

ProgramBox

Скрыть родительский класс, если установлен флажок

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#javascript #css #class #checkbox #parent

#javascript #css #класс #флажок #родительский

Вопрос:

Мне нужно скрыть первый класс ниже (wfob_wrap), когда установлен флажок (wfob_checkbox). Я пробовал много способов, но безуспешно.

Может ли кто-нибудь помочь мне с этим?

Спасибо!

 <div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked="">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ответ №1:

Вы можете использовать что-то вроде этого:

 document.querySelector('[type=checkbox]').addEventListener('change', e => {
  e.target.closest('#wfob_wrap').firstElementChild.style.display = 'none';
});

 <div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked="">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я использовал .closest(..) для получения #wfob_wrap элемента и .firstElementChild для получения первого дочернего элемента этого элемента.

В этом конкретном случае, поскольку элемент, который вы ищете, имеет идентификатор, который вам не нужен .closest(..) , вы можете получить этот элемент напрямую, используя document.getElementById('wfob_wrap') .

Ответ №2:

Я дал два решения для javascript и jquery. Было ли это необходимо?

версия jquery:

 $('.wfob_checkbox.wfob_bump_product').click(function(){
  if($(this).is(':checked')) {
     $(this).closest('#wfob_wrap .wfob_wrapper').css('display', 'none');
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

версия javascript:

 let checkbox = document.querySelector('.wfob_checkbox.wfob_bump_product');

checkbox.onclick = function() {
  if (this.checked) {
    this.closest('.wfob_wrapper').style.display = 'none';
  }
}

 <div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. Это не сработает, если флажок уже установлен. Также нет необходимости в closest, когда у вас есть идентификатор

2. Это ответ на jQuery, вопрос не помечен jQuery.

3. @caramba, автор вопроса не сказал, что ему строго нужно для Javascript, и даже более того, я привел вторую версию для Javascript.

4. @mplungjan, автор вопроса не просил об этом в описании своей проблемы.

Ответ №3:

Попробуйте это

Он может обрабатывать, что флажок установлен при загрузке

Первый предназначен для одного флажка, затем второй для многих.

 const toggle = function() {
  const chk = document.querySelector(".wfob_checkbox");
  chk.closest(".wfob_wrapper").classList.toggle("hide", chk.checked)
};  
window.addEventListener("load",function() {
  document.querySelector(".wfob_checkbox").addEventListener("click",toggle)
  toggle()
});

 .hide { display:none; }

 <div id="wfob_wrap" class="wfob_wrap_start">
  <div class="wfob_wrapper" data-wfob-id="72396">
    <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
      <div class="wfob_outer">
        <div class="wfob_Box">
          <div class="wfob_bgBox_table no_table">
            <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
              <div class="wfob_order_wrap wfob_content_bottom_wrap">
                <div class="wfob_bgBox_table_box">
                  <div class="wfob_bgBox_cell wfob_img_box">
                    <div class="wfob_checkbox_input_wrap">
                      <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Если у вас больше наборов, вы не сможете использовать идентификаторы

 window.addEventListener("load", function() {
  document.getElementById("container").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("wfob_checkbox")) {
      tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)
    }
  });
  
  // loading
  [...document.querySelectorAll(".wfob_checkbox:checked")].forEach(tgt => 
      tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)
  )    
  
});

 .hide {
  display: none;
}

 <div id="container">

  <div class="wfob_wrap_start">
    <div class="wfob_wrapper" data-wfob-id="72396">
      <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
        <div class="wfob_outer">
          <div class="wfob_Box">
            <div class="wfob_bgBox_table no_table">
              <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
                <div class="wfob_order_wrap wfob_content_bottom_wrap">
                  <div class="wfob_bgBox_table_box">
                    <div class="wfob_bgBox_cell wfob_img_box">
                      <div class="wfob_checkbox_input_wrap">
                        <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product">
                      </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="wfob_wrap_start">
    <div class="wfob_wrapper" data-wfob-id="72396">
      <div class="wfob_bump wfob_clear" data-product-key="wfob_5fb3c4fc409e4" data-wfob-id="72396">
        <div class="wfob_outer">
          <div class="wfob_Box">
            <div class="wfob_bgBox_table no_table">
              <div class="wfob_bgBox_tablecell no_table_cell wfob_check_container">
                <div class="wfob_order_wrap wfob_content_bottom_wrap">
                  <div class="wfob_bgBox_table_box">
                    <div class="wfob_bgBox_cell wfob_img_box">
                      <div class="wfob_checkbox_input_wrap">
                        <span class="wfob_bump_checkbox">
                        <input type="checkbox" class="wfob_checkbox wfob_bump_product" checked>
                      </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>