微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

javascript – WordPress小部件中的动态输入字段

分类：JavaScript作者：编程之家
我正在尝试为我正在处理的主题的自定义小部件中的预定义标签集创建动态输入字段.我希望实现这样的目标： 
CourseName           FieldONE             FieldTWO
-------------------------------------------------------------
Chemistry            Sprint 2015          Summer 2015  ( - )
                     Spring 2016          Summer 2016  ( - )
                                                       ( + )
-------------------------------------------------------------
Biology              Sprint 2015          Summer 2015  ( - )
                     Fall 2015            Winter 2015  ( - )
                     Spring 2016          Summer 2016  ( - )
                                                       ( + )
--------------------------------------------------------------
Math                 Fall 2015            Winter 2015  ( - )
                                                       ( + )
--------------------------------------------------------------
Physics              Fall 2015            Winter 2015  ( - )
                                                       ( + )
--------------------------------------------------------------

其中CourseName是化学,生物,数学和物理(仅预定义标签,最多4个),FieldONE和FieldTWO是动态输入,我想为每个课程输入不同的术语.

因此,如果单击(),将为该标签创建两个字段FieldOne和FieldTWO.如果单击( – ),则会删除这两个字段.

我尝试使用this Gist创建与MetaBox类似的动态输入,到目前为止我得到了这个：

<?PHP
/*
Plugin Name: Dynamic Fields Widget
Description: Dynamic Fields
Version: 0.0
Author: Rain Man
*/
// Creating the widget
class dynamic_widget extends WP_Widget
{
    public function __construct()
    {
        parent::__construct(
          // Base ID of your widget
          'dynamic_widget',// Widget name will appear in UI
          __('Dynamic Widget','dynamic_widget_domain'),// Widget description
          array('description' => __('Sample Dynamic Widget','dynamic_widget_domain'))
        );
    }

// widget
public function widget($args,$instance)
{
    $title = apply_filters('widget_title',$instance['title']);
// This is where you run the code and display the output
echo __('Hello,World!','dynamic_widget_domain');
    echo $args['after_widget'];
}

// form
public function form($instance)
{
    if (isset($instance[ 'title' ])) {
        $title = $instance[ 'title' ];
    } else {
        $title = __('New title','dynamic_widget_domain');
    }
// Widget admin form

    $repeatable_fields = array();
    $courses = array(
      'Chemistry'    => array(
        'coursecode'   => 'Chemistry 2059','professor' => 'Dr. James Bond',),'Biology'   => array(
        'coursecode'   => 'Biology 3029','Math' => array(
        'coursecode'   => 'Math 2043','Physics'  => array(
        'coursecode'   => 'Physics 2075',)
    );
     ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function( $){
  $( '#add-row' ).on('click',function() {
    var row = $( '.empty-row.screen-reader-text' ).clone(true);
    row.removeClass( 'empty-row screen-reader-text' );
    row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
    return false;
  });

  $( '.remove-row' ).on('click',function() {
    $(this).parents('tr').remove();
    return false;
  });
});
</script>
<?PHP foreach ($courses as $course_key => $course_info) { ?>
<label><?PHP echo $course_info['coursecode']; ?></label>
<table id="repeatable-fieldset-one" width="100%">
<thead>
  <tr>
    <th width="40%">Fall Term</th>
    <th width="40%">Winter Term</th>
    <th width="8%"></th>
  </tr>
</thead>
<tbody>
<?PHP

if ($repeatable_fields) :

foreach ($repeatable_fields as $field) {
    ?>
<tr>
  <td><input type="text" class="widefat" name="name[]" value="<?PHP if ($field['name'] != '') {
    echo esc_attr($field['name']);
} ?>" /></td>

  <td>
  </td>

  <td><input type="text" class="widefat" name="url[]" value="<?PHP if ($field['url'] != '') {
    echo esc_attr($field['url']);
} else {
    echo '';
} ?>" /></td>

  <td><a class="button remove-row" href="#">Remove</a></td>
  <td><a id="add-row" class="button" href="#">Add</a></td>

</tr>
<?PHP

} else :
// show a blank one

?>
<tr>
  <td><input type="text" class="widefat" name="name[]" /></td>


  <td><input type="text" class="widefat" name="url[]" value="" /></td>

  <td><a class="button remove-row" href="#">Remove</a></td>
  <td><a id="add-row" class="button" href="#">Add</a></td>

</tr>
<?PHP endif; ?>
<? } ?>


<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
  <td><input type="text" class="widefat" name="name[]" /></td>

  <td><input type="text" class="widefat" name="url[]" value="" /></td>

  <td><a class="button remove-row" href="#">Remove</a></td>
  <td><a id="add-row" class="button" href="#">Add</a></td>

</tr>
</tbody>
</table>
</p>
<?PHP

}

// update
public function update($new_instance,$old_instance)
{
    $instance = array();
    $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';

    return $instance;
}
} // Class dynamic_widget ends here

// Register and load the widget
function wpb_load_widget()
{
    register_widget('dynamic_widget');
}
add_action('widgets_init','wpb_load_widget');

这是一个截图：

现在有很多问题,首先javascript“添加”按钮不再有效,我不知道如何保存数据以便以后访问.

任何想法如何为标签制作动态输入字段？它不必与我分享的要点中的代码类似,但最好能让我的修改工作.

解决方法

尝试这个代码,我测试了它,它的工作原理. js代码需要插入页脚而不是小部件中,否则单击按钮将被执行两次.

在函数widget()中,您将看到显示输入值的循环.

<?PHP
/*
Plugin Name: Dynamic Fields Widget
Description: Dynamic Fields
Version: 0.0
Author: Rain Man
*/
// Creating the widget
class dynamic_widget extends WP_Widget
{
    public $courses;
    public function __construct()
    {
        parent::__construct(
          // Base ID of your widget
          'dynamic_widget','dynamic_widget_domain'))
        );
        $this->courses = array(
          'Chemistry'    => array(
            'coursecode'   => 'Chemistry 2059','Biology'   => array(
            'coursecode'   => 'Biology 3029','Math' => array(
            'coursecode'   => 'Math 2043','Physics'  => array(
            'coursecode'   => 'Physics 2075',)
        );
        add_action( 'in_admin_footer',array( $this,'jsfooter'));
    }
    public function jsfooter() {
    ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <script type="text/javascript">
    jQuery(document).ready(function( $){
        $(document ).off('click').on('click','div.open .add-row',function() {

        var row = $(this).closest('tr').clone(true);
        row.find('input').each(function(){
            $(this).val("");
        });
        // row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
        $(this).parents('tr').after(row);

        return false;
      });

      $( document).on('click','div.open .remove-row',function() {
          if ($(this).parents('tbody').find('tr').length >1) {
            $(this).parents('tr').remove(); 
        }
        return false;
      });
    });
    </script>
    <?PHP
    }

// widget
public function widget($args,$instance['title']);
// This is where you run the code and display the output
    foreach ($this->courses as $course_key => $course_info) {
        echo $course_info['coursecode'] .'<br>'; 
        foreach ($instance['repeat'][$course_key ]["fall"] as $k=>$field) {
            echo 'Fall Term ' . $field .' / ';
            echo 'Winter Term ' . $instance['repeat'][$course_key ]["winter"][$k] .'<br>';
        }
    }

    echo $args['after_widget'];
}

// form
public function form($instance)
{
    if (isset($instance[ 'title' ])) {
        $title = $instance[ 'title' ];
    } else {
        $title = __('New title','dynamic_widget_domain');
    }
// Widget admin form
    $repeatable_fields= isset ( $instance['repeat'] ) ? $instance['repeat'] : array();
     ?>

<?PHP foreach ($this->courses as $course_key => $course_info) { ?>
<label><?PHP echo $course_info['coursecode']; ?></label>
<table id="repeatable-fieldset-one" width="100%">
<thead>
  <tr>
    <th width="40%">Fall Term</th>
    <th width="40%">Winter Term</th>
    <th width="8%"></th>
    <th width="8%"></th>
  </tr>
</thead>
<tbody>
<?PHP

if ($repeatable_fields[$course_key ]["fall"] || $repeatable_fields[$course_key ]["winter"]) :
foreach ($repeatable_fields[$course_key ]["fall"] as $k=>$field) {
    ?>
<tr>
  <td><input type="text" class="widefat" name="<?PHP echo $this->get_field_name( 'repeat' )?>[<?PHP echo $course_key;?>][fall][]" value="<?PHP echo $field; ?>" /></td>

  <td><input type="text" class="widefat" name="<?PHP echo $this->get_field_name( 'repeat' )?>[<?PHP echo $course_key;?>][winter][]" value="<?PHP echo $repeatable_fields[$course_key ]["winter"][$k]; ?>" /></td>

  <td><a class="button remove-row" href="#">Remove</a></td>
  <td><a class="button add-row" class="button" href="#">Add</a></td>

</tr>
<?PHP
} else :
// show a blank one

?>
<tr>
  <td><input type="text" class="widefat" name="<?PHP echo $this->get_field_name( 'repeat' )?>[<?PHP echo $course_key;?>][fall][]" /></td>


  <td><input type="text" class="widefat" name="<?PHP echo $this->get_field_name( 'repeat' )?>[<?PHP echo $course_key;?>][winter][]" value="" /></td>

  <td><a class="button remove-row" href="#">Remove</a></td>
  <td><a class="button add-row" class="button" href="#">Add</a></td>

</tr>
<?PHP endif; ?>
</tbody>
</table>
<?PHP } ?>


<!-- empty hidden one for jQuery -->

<?PHP

}

// update
public function update($new_instance,$old_instance)
{
    $instance = array();
    $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
    $instance['repeat'] = array();

    if ( isset ( $new_instance['repeat'] ) )
    {
        foreach ( $new_instance['repeat'] as $k =>$value )
        {
                $instance['repeat'][$k] = $value;
        }
    }

    return $instance;
}
} // Class dynamic_widget ends here

// Register and load the widget
function wpb_load_widget()
{
    register_widget('dynamic_widget');
}
add_action('widgets_init','wpb_load_widget');

数据将存储在$instance [‘repeat“]中的数组中(以了解我是如何创建循环的)

array (size=4)
  'Chemistry' => 
    array (size=2)
      'fall' => 
        array (size=1)
          0 => string 'AAA' (length=3)
      'winter' => 
        array (size=1)
          0 => string 'BBBBBBB' (length=7)
  'Biology' => 
    array (size=2)
      'fall' => 
        array (size=2)
          0 => string 'CCCCCC' (length=6)
          1 => string 'EEEEEEE' (length=7)
      'winter' => 
        array (size=2)
          0 => string 'dddd' (length=4)
          1 => string 'FFFFFFFF' (length=8)
  'Math' => 
    array (size=2)
      'fall' => 
        array (size=1)
          0 => string 'GGGGGGG' (length=7)
      'winter' => 
        array (size=1)
          0 => string 'HHHHHH' (length=6)
  'Physics' => 
    array (size=2)
      'fall' => 
        array (size=1)
          0 => string 'IIIIIIIII' (length=9)
      'winter' => 
        array (size=1)
          0 => string 'JJJJJJJJ' (length=8)

原文地址：https://www.jb51.cc/js/157827.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot