选中一个复选框时，如何在 ACF 中创建的另一个块中隐藏其他复选框？

Question

我在尝试使某个功能正常工作时遇到了困难。我在 ACF 中创建了一个带有复选框的块，以便在保存帖子时运行一个函数。我要做的是在选中一个复选框时隐藏其他复选框。例如，如果我添加了一个块，选中该块中的复选框，然后添加另一个块，则另一个块中的复选框应该被隐藏。

这是我的代码示例。单击蓝色框时会显示复选框：

$(document).on( "click", '#one_image_set_thumbnail', function() {
        $(".acf-field-602d961d31e16").css({'height':'inherit','overflow':'inherit','border-top':'0','padding':'0 0 19.5px'});
});
    $(document).on("click", "#one_image_set_thumbnail,#one_image_feature_image input", function () {
        if ($("#one_image_feature_image input").is(":checked")) {
            $("#one_image_feature_image label").css("display", "none");
            $("#one_image_feature_image .acf-label").text("Thumbnail has been selected");
        } else {
            $("#one_image_feature_image label").css("display", "block");
            $("#one_image_feature_image .acf-label").text("");
        };
    });

#one_image_set_thumbnail {width:120px;height:30.5px;border-color: #007cba;
background: #008dd4;border-radius: 3px;margin-bottom:10px}
#one_image_feature_image {height:0;overflow:hidden}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one_image_set_thumbnail">
</div>
<div id="one_image_feature_image" class="acf-field-602d961d31e16">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<div id="one_image_set_thumbnail">
</div>
<div id="one_image_feature_image" class="acf-field-602d961d31e16">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603631086e87c-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603631086e87c[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

Answer 1

1.当您尝试在一堆 html 元素上执行事件时，请使用class 来执行此操作。 id 用作唯一标识符，仅在整个页面的一个 html 上执行事件。

2.简化您的代码，如下所示：

$(document).on( "click", '.one_image_set_thumbnail', function() {
  $(this).next('.one_image_feature_image').css({
    'height':'inherit',
    'overflow':'inherit',
    'border-top':'0',
    'padding':'0 0 19.5px'
  });
});

$(document).on("click","input[type=checkbox]",function(){
  $('.acf-input').hide();
  $('.one_image_feature_image').find('.acf-label').text("");
  if($(this).is(":checked")){
    $(this).closest('.acf-input').show();
    $(this).closest('.one_image_feature_image').find('.acf-label').text("Thumbnail has been selected");
  }
  
});

工作sn-p：

$(document).on( "click", '.one_image_set_thumbnail', function() {
  $(this).next('.one_image_feature_image').css({
    'height':'inherit',
    'overflow':'inherit',
    'border-top':'0',
    'padding':'0 0 19.5px'
  });
});

$(document).on("click","input[type=checkbox]",function(){
  $('.acf-input').hide();
  $('.one_image_feature_image').find('.acf-label').text("");
  if($(this).is(":checked")){
    $(this).closest('.acf-input').show();
    $(this).closest('.one_image_feature_image').find('.acf-label').text("Thumbnail has been selected");
  }
});

/*instead of # use . now*/
.one_image_set_thumbnail {
  width:120px;
  height:30.5px;
  border-color: #007cba;
  background: #008dd4;
  border-radius: 3px;
  margin-bottom:10px
}
/*instead of # use . now*/
.one_image_feature_image {
  height:0;
  overflow:hidden
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- use class -->
<div class="one_image_set_thumbnail"></div>
<div class="one_image_feature_image acf-field-602d961d31e16"><!-- use class -->
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
      <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<!-- use class -->
<div class="one_image_set_thumbnail"></div>
<div class="one_image_feature_image acf-field-602d961d31e16"><!-- use class -->
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603631086e87c-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603631086e87c[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

注意：- 检查 HTML 评论 <!-- use class --> 我建议你添加类，以及检查 CSS 修改

Answer 2

当您的checkbox 被选中时，您可以使用.not() 排除其他div 并在显示时隐藏它们。另外，我使用.next()、.parent()、closest() 只是为了遍历DOM。

演示代码：

$(document).on("click", '.one_image_set_thumbnail', function() {
  $(this).next(".acf-field-602d961d31e16").find(".acf-input").css("display", "block"); //show acf div ..
  $(this).next(".acf-field-602d961d31e16").css({
    'height': 'inherit',
    'overflow': 'inherit',
    'border-top': '0',
    'padding': '0 0 19.5px'
  });
});
//on click of input
$(document).on("click", ".one_image_feature_image input", function() {
  if ($(this).is(":checked")) {
    $(this).parent().css("display", "none"); //hide label
    $(this).closest('.one_image_feature_image').find(".acf-label").text("Thumbnail has been selected");
    $(".acf-input").not($(this).closest(".acf-input")).css("display", "none"); //hide other acf input div

  } else {
    $(this).parent().css("display", "block");
    $(this).closest('.one_image_feature_image').find(".acf-label").text("");
  };
});

.one_image_set_thumbnail {
  width: 120px;
  height: 30.5px;
  border-color: #007cba;
  background: #008dd4;
  border-radius: 3px;
  margin-bottom: 10px
}

.one_image_feature_image {
  height: 0;
  overflow: hidden
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one_image_set_thumbnail">
</div>
<div class="acf-field-602d961d31e16 one_image_feature_image">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<div class="one_image_set_thumbnail">
</div>
<div class="acf-field-602d961d31e16 one_image_feature_image">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

阅读此处了解更多信息：

https://api.jquery.com/category/traversing/tree-traversal/