在编辑器中获取父组合框中页面的ID

时间：2021-02-02 作者：GeorgeP

我有一个自定义的post类型和一个带有自定义post\\u元字段的元框。

编辑器侧栏中的父下拉字段过去是<select> 要素我有一些脚本onChange 触发元盒中不同字段的隐藏/显示，使其具有条件，这取决于正在编辑的页面是父级还是子级：

$(document).on("change", ".editor-page-attributes__parent select", function(){
    toggleFields();
}
中的选项<select> 将ID作为值，以便我可以获取所选父级的标题和ID，并在metabox中为我的用户动态显示一些数据：

var dropdown = $(\'.editor-page-attributes__parent select\');
var parentName = dropdown.find(\':selected\').text();
var parentId = dropdown.val();
自v5.6以来，Wordpress已将该select元素替换为Combo Box. 我试图得到同样的数据onChange 只在使用blur:

$(document).on("blur", ".editor-page-attributes__parent .components-combobox-control__input", function(){
    toggleFields();
    var parentName = dropdown.val();
})
我只能获取页面标题，因为此组合框现在有一个缺少ID的输入元素，如下所示：

<input id="components-form-token-input-0" type="text" class="components-combobox-control__input components-form-token-field__input" value="Page Name Here">
我还尝试过使用Ajax检索IDget_page_by_title() 但它并不总是起作用，因为页面可能具有相同的标题，并且编辑器还在层次结构级别的名称中添加破折号和空格。

如何在更改时获取父组合框中所选页面的关联ID？

1 个回复
SO网友:GeorgeP

阅读一段时间后Editor Documentation 我找到了正确的解决方案。这是您如何在WP编辑器中侦听更改并获取父组合框选择的id的方法：

wp.data.subscribe( function () {
  var newParent = wp.data.select(\'core/editor\').getEditedPostAttribute(\'parent\');
  console.log(newParent);
} );
wp.data.subscribe 在编辑器中编辑帖子时，每次在当前状态下发生更改时都会调用，因此每次都会调用listener函数。当我们想要的字段发生实际更改时，我们可以通过简单的变量检查来避免这种情况。It behaves as Redux subscribe 没有退订，只有一个听众。

要检查我们正在编辑的当前帖子类型，我们可以使用getCurrentPostType:

wp.data.select(\'core/editor\').getCurrentPostType();
这是此问题的完整代码，供将来参考：

if (wp.data.select(\'core/editor\').getCurrentPostType() == \'cpt_name\') {
 const getPostParent = () => wp.data.select(\'core/editor\').getEditedPostAttribute(\'parent\');

 // set initial parent
 let postParent = getPostParent();

 wp.data.subscribe(() => {

    // get current parent
    const newPostParent = getPostParent();    

    // only if parent changes
    if( postParent !== newPostParent ) {
      // Do what we want after parent changed
         toggleFields();
    }

    // update the variable
    postParent = newPostParent;

 });

}

标签： javascript   jquery   block-editor   小码农  

相关推荐

页脚中的jQuery 3.5.1出现问题

我的Wordpress安装版本是5.6版和Jquery 3.5.1版。Wordpress Gallery块支持指向媒体图像大文件的链接，但该链接会在相同的窗口中打开图像。我通常使用Fancybox类来<；a>；标记以在弹出窗口中打开大图像（a href=“big image.jpg”class=“fancybox”…）。block gallery不支持类链接，因此我编写了一个JQuery脚本并将其放在页脚中，以将类添加到库的href图像中。脚本启动ad文档。准备好的以下是脚本：jQuery(doc