【问题标题】:How to run jQuery code on WordPress admin?如何在 WordPress 管理员上运行 jQuery 代码?
【发布时间】:2021-04-03 20:06:19
【问题描述】:

创建新帖子时如何运行 jQuery 脚本。我能够将脚本排入队列并可以在编辑器中看到 .js 文件,但代码不会执行。我知道有一种特殊的方法可以在管理员中运行 jquery 代码,但找不到那种方法。该代码是一个简单的脚本,用于更改单击时使用 ACF 的按钮的背景。我能够让它在 codepen 上工作 - https://codepen.io/openbayou/pen/MWjOOZM

代码如下:

<div class="acf-field acf-field-button-group acf-field-5fe2d3efcb5f8" data-name="box_photo_deets" data-type="button_group" data-key="field_5fe2d3efcb5f8" data-conditions="[[{&quot;field&quot;:&quot;field_5f8bec0f9f45d&quot;,&quot;operator&quot;:&quot;!=empty&quot;}]]">
   <div class="acf-label"></div>
   <div class="acf-input">
      <input type="hidden" name="acf-block_5fe163b63d274[field_5fe2d3efcb5f8]">
      <div class="acf-button-group"><label class="selected"><input type="radio" name="acf-block_5fe163b63d274[field_5fe2d3efcb5f8]" value="box_show_deets" checked="checked"> Show details</label></div></div>
</div>

这是脚本:

(function ($) {
$(window).on('my.custom.event', function () {
    $(".acf-field-5fe2d3efcb5f8 .acf-input .acf-button-group label").click(function(){
        $(".acf-field-5fe2d3efcb5f8 .acf-input .acf-button-group label.selected").css('background','black');
    });
});
})(jQuery);

jQuery(window).trigger('my.custom.event');

【问题讨论】:

  • 我不明白你为什么要使用这个自定义事件? my.custom.event。我猜你想改变点击事件的背景颜色!
  • 您在控制台中看到错误吗?您可能会发现这对调试或了解正在发生的事情很有用。 stackoverflow.com/a/5706909/3825777

标签: jquery wordpress advanced-custom-fields wordpress-gutenberg


【解决方案1】:

让DOM在逻辑之前准备好。

(function($) {
    $(document).ready(function() {

       $(".acf-field-5fe2d3efcb5f8 .acf-input .acf-button-group label")
       .click(function() {
           $(".acf-field-5fe2d3efcb5f8 .acf-input .acf-button-group label.selected")
           .css('background','black');
       });
    });
})(jQuery);

【讨论】:

    猜你喜欢
    • 2019-02-26
    • 2011-03-23
    • 2015-01-04
    • 2016-12-18
    • 1970-01-01
    • 1970-01-01
    • 2016-10-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多