我想使用jQuery根据另一个分类法的复选框状态,有条件地从快速编辑框中隐藏一些分类法。
我有一家WooCommerce进口商店。根据产品类别分类法,产品分为两个基本分组:
产品类别时尚食品但根据产品类别,每种产品都有一系列不同的分类:
原产国-时尚;食品时尚品牌时尚食品时尚类别时尚食品时尚季节时尚性别时尚鉴于这是相当多的分类法,我决定隐藏分类法,仅根据产品类别分类法中是否单击食品或时尚来显示分类法。
这对于产品编辑管理屏幕非常有用。
我将要隐藏的分类法元框的css设置为不显示,并为它们创建了一个经过修改的css类来显示块,如下所示:
#fashion-categorydiv,
#fashion-branddiv,
#fashion-seasondiv,
#genderdiv,
#food-drink-categorydiv,
#food-drink-brandsdiv,
#country-of-origindiv {
display: none;
}
#fashion-categorydiv.show,
#fashion-branddiv.show,
#fashion-seasondiv.show,
#genderdiv.show,
#food-drink-categorydiv.show,
#food-drink-brandsdiv.show,
#country-of-origindiv.show {
display: block;
}
我加载了以下javascript来添加。如果产品类别复选框已勾选,或在编辑屏幕打开时已勾选,则显示类别:(function(){
var fashionCheckBox = jQuery(\'#product_catchecklist li label input#in-product_cat-46:checkbox\');
var fashionCategory = jQuery(\'#fashion-categorydiv\');
var fashionBrand = jQuery(\'#fashion-branddiv\');
var fashionSeason = jQuery(\'#fashion-seasondiv\');
var fashionGender = jQuery(\'#genderdiv\');
var foodDrinkCheckBox = jQuery(\'#product_catchecklist li label input#in-product_cat-45:checkbox\');
var foodDrinkCategory = jQuery(\'#food-drink-categorydiv\');
var foodDrinkBrands = jQuery(\'#food-drink-brandsdiv\');
var foodDrinkCountry = jQuery(\'#country-of-origindiv\');
if (fashionCheckBox.is(\':checked\')) {
fashionCategory.addClass(\'show\');
fashionBrand.addClass(\'show\');
fashionSeason.addClass(\'show\');
fashionGender.addClass(\'show\');
}
fashionCheckBox.change(function(){
if (this.checked) {
fashionCategory.addClass(\'show\');
fashionBrand.addClass(\'show\');
fashionSeason.addClass(\'show\');
fashionGender.addClass(\'show\');
} else {
fashionCategory.removeClass(\'show\');
fashionBrand.removeClass(\'show\');
fashionSeason.removeClass(\'show\');
fashionGender.removeClass(\'show\');
}
});
if (foodDrinkCheckBox.is(\':checked\')) {
foodDrinkCategory.addClass(\'show\');
foodDrinkBrands.addClass(\'show\');
foodDrinkCountry.addClass(\'show\');
}
foodDrinkCheckBox.change(function(){
if (this.checked) {
foodDrinkCategory.addClass(\'show\');
foodDrinkBrands.addClass(\'show\');
foodDrinkCountry.addClass(\'show\');
} else {
foodDrinkCategory.removeClass(\'show\');
foodDrinkBrands.removeClass(\'show\');
foodDrinkCountry.removeClass(\'show\');
}
});
})();
这很有效。这纯粹是装饰性的,只是为了清理编辑产品屏幕。如果可能的话,我决定尝试一下用快速编辑做同样的事情,但我无法让它工作。
当快速编辑打开,我将代码加载到控制台时,一切正常,但只要我刷新或转到另一篇文章进行快速编辑,它就会停止工作。
我知道当单击“快速编辑”按钮时,快速编辑框会动态填充,这是问题的症结所在。
我现在已经阅读了无数关于向快速编辑框中添加自定义字段和元数据的教程,但没有阅读过任何关于如何实现这种功能的教程。
我真的希望有人能帮忙。我知道我可以通过快速编辑关闭分类法,这是我唯一的另一个选择,目前,分类法太多了,无法满足舒适的可用性。
谢谢你的帮助。