如何解决选择一个复选框时,如何在 ACF 中创建的另一个块中隐藏其他复选框?
我在尝试使函数正常工作时遇到困难。我在 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>
解决方法
每当您的 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/
,1.当您尝试在一堆 html 元素上执行事件时,请使用 class
来执行此操作。 id
用作唯一标识符以仅在整个页面的一个 html 上执行事件。
2. 简化您的代码,如下所示:
$(document).on( "click",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");
}
});
工作片段:
$(document).on( "click",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 修改
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。