选中一个复选框时,如何在 ACF 中创建的另一个块中隐藏其他复选框?
Posted
技术标签:
【中文标题】选中一个复选框时,如何在 ACF 中创建的另一个块中隐藏其他复选框?【英文标题】:How to hide others checkboxes in another block created in ACF when one checkbox is selected? 【发布时间】:2021-05-27 11:03:18 【问题描述】:我在尝试使某个功能正常工作时遇到了困难。我在 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>
【问题讨论】:
【参考方案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 修改
【讨论】:
【参考方案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/
【讨论】:
感谢您的帮助。就像上面的回复一样,这不是我想要的。选择时,我要求帮助隐藏其他复选框。这是我正在努力完成的照片 - i.imgur.com/EB1mUdT.png 是的,上面的代码你测试了吗?我也在这里使用类,因为你不能有相同的 id。这条线$(".acf-input").not($(this).closest(".acf-input")).css("display", "none");
这样做。以上是关于选中一个复选框时,如何在 ACF 中创建的另一个块中隐藏其他复选框?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 VBA 的另一个函数中调用我在 VBA 中创建的函数?
如何在Glassfishv4上的另一个Servlet中创建的Servlet中恢复会话?
Django Annotate - 我可以将在 annotate 中创建的字段用于在 annotate 中创建的另一个字段吗?