Question

我尝试将SiteOrigin的Page Builder集成到我的插件中。我已通过找到的siteorigin_panels_row_style_fields过滤器here在行样式下添加了一些自定义字段。其中一个自定义字段是选择。当select处于某个值时，我希望隐藏或显示字段。我已根据the documentation使用siteorigin_panel_enqueue_admin_scripts操作将javascript排入页面构建器，甚至添加了panelsopen事件和一些测试代码：

jQuery( document ).ready(function($) {
  $(document).on('panelsopen', function(e) {
    $('select[name="style[test_field]"]').bind('change', function (e) {
      if( $(this).val() == 'option1' ) {
        $('input[name="style[second_field]').hide(500);
        $('input[name="style[third_field]').show(500);
      } else {
        $('input[name="style[second_field]').show(500);
        $('input[name="style[third_field]').hide(500);
      }
    });
  });
});

但是，这似乎不起作用。任何帮助或想法如何解决这个问题将不胜感激！

Answer 1

经过一些研究后，我通过在jQuery中使用ajaxComplete()函数来解决这个问题。这是它的工作原理：

$(function() {
  $(document).ajaxComplete(function() {

    $('select[name="style[test_field]"]').bind('change', function (e) {
      if( $(this).val() == 'option1' ) {
        $('input[name="style[second_field]').hide(500);
        $('input[name="style[third_field]').show(500);
      } else {
        $('input[name="style[second_field]').show(500);
        $('input[name="style[third_field]').hide(500);
      }
    });

  });
});

我希望这可以帮助任何人尝试实现类似的目标。

基于SiteOrigin Page Builder

1 个答案: