问题描述
我在我的块上使用灵活的内容向帖子添加图像。在那个灵活的内容中,我有一个复选框可以使该图像成为特征图像。我想知道是否有办法让第一个灵活内容中的复选框被选中,它会隐藏其余的复选框。问题是它们都具有相同的类 (.acf-field-5f8cf27f39a66
) 和 ID (#three_img_plus_feature_img
),因此当您隐藏该复选框时,它会隐藏所有这些。有关如何解决此问题的任何解决方案。谢谢。
我到目前为止的代码:
$(document).on("click","#three_img_plus_feature_img input",function () {
if ($("#three_img_plus_feature_img input").is(":checked")) {
$("#three_img_plus_feature_img label").css("display","none");
} else {
$("#three_img_plus_feature_img label").css("display","block");
}
});
HTML 看起来像这样。添加的每个项目都是一样的,所以如果有两个项目,它们看起来都一样。
<div id="three_img_plus_feature_img" class="acf-field acf-field-checkBox acf-field-5f8cf27f39a66" data-name="three_img_plus_feature_img" data-type="checkBox" data-key="field_5f8cf27f39a66" data-conditions="[[{"field":"field_5f8cf27f39951","operator":"!=empty"}]]">
<div class="acf-label"></div>
<div class="acf-input">
<input type="hidden" name="acf-block_6019b745d990c[field_5f8cf27e7c782 [6019b7a4d990e][field_5f8cf27f39a66]">
<ul class="acf-checkBox-list acf-bl">
<li><label class=""><input type="checkBox" id="acf-block_6019b745d990c-field_5f8cf27e7c782-6019b7a4d990e-field_5f8cf27f39a66-three_img_plus_set_feature_img" name="acf-block_6019b745d990c[field_5f8cf27e7c782][6019b7a4d990e][field_5f8cf27f39a66][]" value="three_img_plus_set_feature_img"> Set featured image</label></li>
</ul>
</div>
解决方法
您可以在点击的那个上添加一个临时类,用于识别。也许不是最好的方法,但它可以工作:
$(document).on("click","#three_img_plus_feature_img input",function () {
$("#three_img_plus_feature_img").removeClass('current');
$(this).closest("#three_img_plus_feature_img").addClass('current');
if ($(this).is(":checked")) {
$("#three_img_plus_feature_img:not(.current) label").css("display","none");
} else {
$("#three_img_plus_feature_img:not(.current) label").css("display","block");
}
});