选中复选框时隐藏祖父母班级

Question

当选中复选框（wfob_checkbox）时，我需要隐藏下面的第一个类（wfob_wrap）。我尝试了很多方法都没有成功。有人能帮我解决这个问题吗？谢谢你！<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>

Answer 1

尝试这个

它可以处理加载时选中复选框的情况

第一个用于一个复选框，第二个用于多个复选框。

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>

如果有更多集合，则不能使用 ID

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>

Answer 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>

Answer 3

你可以使用这样的东西：

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来获取该元素的第一个子元素。

在这种特定情况下，由于您要查找的元素有一个 id，因此您不需要.closest(..)，您可以直接使用 来获取该元素document.getElementById('wfob_wrap')。