使用jQuery有条件地隐藏快速编辑中的元素

时间：2017-08-23 作者：Jeff Cleverley

我想使用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\');
    }
  });


})();
这很有效。这纯粹是装饰性的，只是为了清理编辑产品屏幕。

如果可能的话，我决定尝试一下用快速编辑做同样的事情，但我无法让它工作。

当快速编辑打开，我将代码加载到控制台时，一切正常，但只要我刷新或转到另一篇文章进行快速编辑，它就会停止工作。

我知道当单击“快速编辑”按钮时，快速编辑框会动态填充，这是问题的症结所在。

我现在已经阅读了无数关于向快速编辑框中添加自定义字段和元数据的教程，但没有阅读过任何关于如何实现这种功能的教程。

我真的希望有人能帮忙。我知道我可以通过快速编辑关闭分类法，这是我唯一的另一个选择，目前，分类法太多了，无法满足舒适的可用性。

谢谢你的帮助。

1 个回复
SO网友:Jeff Cleverley

所以我在Tonya Mork@KnowTheCode 和atutorial 关于改编Rachel Carden的快速编辑。

我需要重构代码，仍然有很多重复，但我基本上是一个Javascript/jQuery新手，所以请耐心等待。

无论如何，解决方案如下：

我的自定义管理css，保存在我的子主题中为product-admin-quick-edit.css:

ul.fashion-category-checklist,
ul.fashion-brand-checklist,
ul.fashion-season-checklist,
ul.gender-checklist,
ul.food-drink-category-checklist,
ul.food-drink-brands-checklist,
ul.country-of-origin-checklist {
    display: none;
}

body.wp-admin span.inline-edit-categories-label {
    display: none;
}
然后我将jQuery保存在我的子主题/js文件夹中product-admin-quick-edit-jquery.js: 

(function($) {

  // we create a copy of the WP inline edit post function
  var $wp_inline_edit = inlineEditPost.edit;
  // and then we overwrite the function with our own code
  inlineEditPost.edit = function( id ) {

    // "call" the original WP edit function
    // we don\'t want to leave WordPress hanging
    $wp_inline_edit.apply( this, arguments );

    // now we take care of our business

    // get the post ID
    var $post_id = 0;
    if ( typeof( id ) == \'object\' )
      $post_id = parseInt( this.getId( id ) );

    if ( $post_id > 0 ) {

      var productCategoryQuickEdit = jQuery(\'ul.product_cat-checklist\');

      var fashionQuickEditCheckBox = jQuery(\'ul.product_cat-checklist li label input#in-product_cat-46:checkbox\');
      var fashionCategoryQuickEdit = jQuery(\'ul.fashion-category-checklist\');
      var fashionBrandQuickEdit = jQuery(\'ul.fashion-brand-checklist\');
      var fashionSeasonQuickEdit = jQuery(\'ul.fashion-season-checklist\');
      var fashionGenderQuickEdit = jQuery(\'ul.gender-checklist\');

      var foodDrinkQuickEditCheckBox = jQuery(\'ul.product_cat-checklist li label input#in-product_cat-45:checkbox\');
      var foodDrinkCategoryQuickEdit = jQuery(\'ul.food-drink-category-checklist\');
      var foodDrinkBrandsQuickEdit = jQuery(\'ul.food-drink-brands-checklist\');
      var foodDrinkCountryQuickEdit = jQuery(\'ul.country-of-origin-checklist\');

      productCategoryQuickEdit.prev().prev().css("display", "block");

      if (fashionQuickEditCheckBox.is(\':checked\')) {
        fashionCategoryQuickEdit.css("display", "block");
        fashionBrandQuickEdit.css("display", "block");
        fashionSeasonQuickEdit.css("display", "block");
        fashionGenderQuickEdit.css("display", "block");
        fashionCategoryQuickEdit.prev().prev().css("display", "block");
        fashionBrandQuickEdit.prev().prev().css("display", "block");
        fashionSeasonQuickEdit.prev().prev().css("display", "block");
        fashionGenderQuickEdit.prev().prev().css("display", "block");
      }

      fashionQuickEditCheckBox.change(function(){
        if (this.checked) {
          fashionCategoryQuickEdit.css("display", "block");
          fashionBrandQuickEdit.css("display", "block");
          fashionSeasonQuickEdit.css("display", "block");
          fashionGenderQuickEdit.css("display", "block");
          fashionCategoryQuickEdit.prev().prev().css("display", "block");
          fashionBrandQuickEdit.prev().prev().css("display", "block");
          fashionSeasonQuickEdit.prev().prev().css("display", "block");
          fashionGenderQuickEdit.prev().prev().css("display", "block");
        } else {
          fashionCategoryQuickEdit.css("display", "none");
          fashionBrandQuickEdit.css("display", "none");
          fashionSeasonQuickEdit.css("display", "none");
          fashionGenderQuickEdit.css("display", "none");
          fashionCategoryQuickEdit.prev().prev().css("display", "none");
          fashionBrandQuickEdit.prev().prev().css("display", "none");
          fashionSeasonQuickEdit.prev().prev().css("display", "none");
          fashionGenderQuickEdit.prev().prev().css("display", "none");
        }
      });

      if (foodDrinkQuickEditCheckBox.is(\':checked\')) {
        foodDrinkCategoryQuickEdit.css("display", "block");
        foodDrinkBrandsQuickEdit.css("display", "block");
        foodDrinkCountryQuickEdit.css("display", "block");
        foodDrinkCategoryQuickEdit.prev().prev().css("display", "block");
        foodDrinkBrandsQuickEdit.prev().prev().css("display", "block");
        foodDrinkCountryQuickEdit.prev().prev().css("display", "block");
      }

      foodDrinkQuickEditCheckBox.change(function(){
        if (this.checked) {
          foodDrinkCategoryQuickEdit.css("display", "block");
          foodDrinkBrandsQuickEdit.css("display", "block");
          foodDrinkCountryQuickEdit.css("display", "block");
          foodDrinkCategoryQuickEdit.prev().prev().css("display", "block");
          foodDrinkBrandsQuickEdit.prev().prev().css("display", "block");
          foodDrinkCountryQuickEdit.prev().prev().css("display", "block");
        } else {
          foodDrinkCategoryQuickEdit.css("display", "none");
          foodDrinkBrandsQuickEdit.css("display", "none");
          foodDrinkCountryQuickEdit.css("display", "none");
          foodDrinkCategoryQuickEdit.prev().prev().css("display", "none");
          foodDrinkBrandsQuickEdit.prev().prev().css("display", "none");
          foodDrinkCountryQuickEdit.prev().prev().css("display", "none");
        }
      });

    }

  };

})(jQuery);
然后我将这些文件放入functions.php:

add_action( \'admin_enqueue_scripts\', \'load_my_custom_wp_admin_style\' );
function load_my_custom_wp_admin_style() {
    wp_register_style( \'product_admin_quick_edit_css\', get_stylesheet_directory_uri() . \'/product-admin-quick-edit.css\', false, \'1.0.0\' );
    wp_enqueue_style( \'product_admin_quick_edit_css\' );
}

add_action( \'admin_print_scripts-edit.php\', \'load_custom_quick_edit_scripts\', 9999, 2 );
function load_custom_quick_edit_scripts(){
    wp_enqueue_script( \'product-admin-quick-edit-jquery\', get_stylesheet_directory_uri() . "/js/product-admin-quick-edit-jquery.js", array( \'jquery\', \'inline-edit-post\' ), CHILD_THEME_VERSION, true );
}
确保在晚些时候将脚本排队9999, 让他们依赖inline-edit-post 来自WP Core的javascript。

我将把jQuery重构成某种循环，以添加和删除css类，这应该会大大减少它。

希望它能帮助其他人，我找不到任何其他关于在依赖于其他分类设置的快速编辑中动态显示分类的材料，所以我猜不太需要它。

结束
标签： jquery   quick-edit   小码农  

相关推荐

Parsing php string in jquery

我使用serialise发送php数组，但响应不同。这是我的尝试$array = serialize($out); var_dump(serialize($array)); //string(58) \"s:50:\"a:2:{s:9:\"sidebar-1\";i:5;s:12:\"footer-insta\";i:2;}\";\" 我发送此值的方式，echo \'<div data-ad = \'.$array.\' class=\"ash_loadmore\">