如何修改jQuery代码仅控制指定ID的DIV显示隐藏不影响其他元素

修改逻辑 #

原有代码的问题在于$("#all div")选择器会命中#all容器下的所有后代div（包括id="box"的div内部嵌套的所有div），因此修改时只需要把所有操作元素的选择器限定为仅匹配id="box"的div即可。

调整后的完整代码 #

const clicked = () => {
  // 仅隐藏#all下id为box的直接子div
  $("#all > div[id='box']").hide();
  // 避免重复绑定change事件，先解绑再绑定
  $("p#checkboxes > :checkbox").off('change').on('change', () => {
    $("#all > div[id='box']").hide();
    if ($("#showall").is(":checked")) {
      $("#all > div[id='box']").show();
    } else {
      // 所有show操作都限定为仅作用于id为box的div
      if ($("#red").is(":checked")) $("div[id='box'].red").show();
      if ($("#orange").is(":checked")) $("div[id='box'].orange").show();
      if ($("#yellow").is(":checked")) $("div[id='box'].yellow").show();
      if ($("#green").is(":checked")) $("div[id='box'].green").show();
      if ($("#blue").is(":checked")) $("div[id='box'].blue").show();
      if ($("#purple").is(":checked")) $("div[id='box'].purple").show();
      if ($("#clear").is(":checked")) $("div[id='box'].clear").show();
      if ($("#black").is(":checked")) $("div[id='box'].black").show();
      if ($("#white").is(":checked")) $("div[id='box'].white").show();
      if ($("#brown").is(":checked")) $("div[id='box'].brown").show();
      if ($("#grey").is(":checked")) $("div[id='box'].grey").show();
      if ($("#pink").is(":checked")) $("div[id='box'].pink").show();
      if ($("#marble").is(":checked")) $("div[id='box'].marble").show();
      if ($("#smoke").is(":checked")) $("div[id='box'].smoke").show();
      if ($("#trans").is(":checked")) $("div[id='box'].trans").show();
      if ($("#opaque").is(":checked")) $("div[id='box'].opaque").show();
      if ($("#split").is(":checked")) $("div[id='box'].split").show();
      if ($("#double").is(":checked")) $("div[id='box'].double").show();
      if ($("#splat").is(":checked")) $("div[id='box'].splat").show();
      if ($("#og").is(":checked")) $("div[id='box'].og").show();
    }
  });
};

补充说明 #

代码中增加的.off('change')操作用于避免每次点击checkbox都重复绑定change事件、导致逻辑执行多次的问题，不影响核心筛选功能，适配你保留重复id的使用场景。

内容的提问来源于stack exchange，提问作者Allan Stanley