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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了javascript – WordPress小部件中的动态输入字段，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试为我正在处理的主题的自定义小部件中的预定义标签集创建动态输入字段.我希望实现这样的目标： 
  1. CourseName           FieldONE             FieldTWO
  2. -------------------------------------------------------------
  3. Chemistry            Sprint 2015          Summer 2015  ( - )
  4.                      Spring 2016          Summer 2016  ( - )
  5.                                                        ( + )
  6. -------------------------------------------------------------
  7. Biology              Sprint 2015          Summer 2015  ( - )
  8.                      Fall 2015            Winter 2015  ( - )
  9.                      Spring 2016          Summer 2016  ( - )
  10.                                                        ( + )
  11. --------------------------------------------------------------
  12. Math                 Fall 2015            Winter 2015  ( - )
  13.                                                        ( + )
  14. --------------------------------------------------------------
  15. Physics              Fall 2015            Winter 2015  ( - )
  16.                                                        ( + )
  17. --------------------------------------------------------------

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

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

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

  1. <?PHP
  2. /*
  3. Plugin Name: Dynamic Fields Widget
  4. Description: Dynamic Fields
  5. Version: 0.0
  6. Author: Rain Man
  7. */
  8. // Creating the widget
  9. class dynamic_widget extends WP_Widget
  10. {
  11.     public function __construct()
  12.     {
  13.         parent::__construct(
  14.           // Base ID of your widget
  15.           'dynamic_widget',// Widget name will appear in UI
  16.           __('Dynamic Widget','dynamic_widget_domain'),// Widget description
  17.           array('description' => __('Sample Dynamic Widget','dynamic_widget_domain'))
  18.         );
  19.     }
  20.  
  21. // widget
  22. public function widget($args,$instance)
  23. {
  24.     $title = apply_filters('widget_title',$instance['title']);
  25. // This is where you run the code and display the output
  26. echo __('Hello,World!','dynamic_widget_domain');
  27.     echo $args['after_widget'];
  28. }
  29.  
  30. // form
  31. public function form($instance)
  32. {
  33.     if (isset($instance[ 'title' ])) {
  34.         $title = $instance[ 'title' ];
  35.     } else {
  36.         $title = __('New title','dynamic_widget_domain');
  37.     }
  38. // Widget admin form
  39.  
  40.     $repeatable_fields = array();
  41.     $courses = array(
  42.       'Chemistry'    => array(
  43.         'coursecode'   => 'Chemistry 2059','professor' => 'Dr. James Bond',),'Biology'   => array(
  44.         'coursecode'   => 'Biology 3029','Math' => array(
  45.         'coursecode'   => 'Math 2043','Physics'  => array(
  46.         'coursecode'   => 'Physics 2075',)
  47.     );
  48.      ?>
  49.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  50.  
  51. <script type="text/javascript">
  52. jQuery(document).ready(function( $){
  53.   $( '#add-row' ).on('click',function() {
  54.     var row = $( '.empty-row.screen-reader-text' ).clone(true);
  55.     row.removeClass( 'empty-row screen-reader-text' );
  56.     row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
  57.     return false;
  58.   });
  59.  
  60.   $( '.remove-row' ).on('click',function() {
  61.     $(this).parents('tr').remove();
  62.     return false;
  63.   });
  64. });
  65. </script>
  66. <?PHP foreach ($courses as $course_key => $course_info) { ?>
  67. <label><?PHP echo $course_info['coursecode']; ?></label>
  68. <table id="repeatable-fieldset-one" width="100%">
  69. <thead>
  70.   <tr>
  71.     <th width="40%">Fall Term</th>
  72.     <th width="40%">Winter Term</th>
  73.     <th width="8%"></th>
  74.   </tr>
  75. </thead>
  76. <tbody>
  77. <?PHP
  78.  
  79. if ($repeatable_fields) :
  80.  
  81. foreach ($repeatable_fields as $field) {
  82.     ?>
  83. <tr>
  84.   <td><input type="text" class="widefat" name="name[]" value="<?PHP if ($field['name'] != '') {
  85.     echo esc_attr($field['name']);
  86. } ?>" /></td>
  87.  
  88.   <td>
  89.   </td>
  90.  
  91.   <td><input type="text" class="widefat" name="url[]" value="<?PHP if ($field['url'] != '') {
  92.     echo esc_attr($field['url']);
  93. } else {
  94.     echo '';
  95. } ?>" /></td>
  96.  
  97.   <td><a class="button remove-row" href="#">Remove</a></td>
  98.   <td><a id="add-row" class="button" href="#">Add</a></td>
  99.  
  100. </tr>
  101. <?PHP
  102.  
  103. } else :
  104. // show a blank one
  105.  
  106. ?>
  107. <tr>
  108.   <td><input type="text" class="widefat" name="name[]" /></td>
  109.  
  110.  
  111.   <td><input type="text" class="widefat" name="url[]" value="" /></td>
  112.  
  113.   <td><a class="button remove-row" href="#">Remove</a></td>
  114.   <td><a id="add-row" class="button" href="#">Add</a></td>
  115.  
  116. </tr>
  117. <?PHP endif; ?>
  118. <? } ?>
  119.  
  120.  
  121. <!-- empty hidden one for jQuery -->
  122. <tr class="empty-row screen-reader-text">
  123.   <td><input type="text" class="widefat" name="name[]" /></td>
  124.  
  125.   <td><input type="text" class="widefat" name="url[]" value="" /></td>
  126.  
  127.   <td><a class="button remove-row" href="#">Remove</a></td>
  128.   <td><a id="add-row" class="button" href="#">Add</a></td>
  129.  
  130. </tr>
  131. </tbody>
  132. </table>
  133. </p>
  134. <?PHP
  135.  
  136. }
  137.  
  138. // update
  139. public function update($new_instance,$old_instance)
  140. {
  141.     $instance = array();
  142.     $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
  143.  
  144.     return $instance;
  145. }
  146. } // Class dynamic_widget ends here
  147.  
  148. // Register and load the widget
  149. function wpb_load_widget()
  150. {
  151.     register_widget('dynamic_widget');
  152. }
  153. add_action('widgets_init','wpb_load_widget');

这是一个截图：

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

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

解决方法

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

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

  1. <?PHP
  2. /*
  3. Plugin Name: Dynamic Fields Widget
  4. Description: Dynamic Fields
  5. Version: 0.0
  6. Author: Rain Man
  7. */
  8. // Creating the widget
  9. class dynamic_widget extends WP_Widget
  10. {
  11.     public $courses;
  12.     public function __construct()
  13.     {
  14.         parent::__construct(
  15.           // Base ID of your widget
  16.           'dynamic_widget','dynamic_widget_domain'))
  17.         );
  18.         $this->courses = array(
  19.           'Chemistry'    => array(
  20.             'coursecode'   => 'Chemistry 2059','Biology'   => array(
  21.             'coursecode'   => 'Biology 3029','Math' => array(
  22.             'coursecode'   => 'Math 2043','Physics'  => array(
  23.             'coursecode'   => 'Physics 2075',)
  24.         );
  25.         add_action( 'in_admin_footer',array( $this,'jsfooter'));
  26.     }
  27.     public function jsfooter() {
  28.     ?>
  29.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  30.  
  31.     <script type="text/javascript">
  32.     jQuery(document).ready(function( $){
  33.         $(document ).off('click').on('click','div.open .add-row',function() {
  34.  
  35.         var row = $(this).closest('tr').clone(true);
  36.         row.find('input').each(function(){
  37.             $(this).val("");
  38.         });
  39.         // row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
  40.         $(this).parents('tr').after(row);
  41.  
  42.         return false;
  43.       });
  44.  
  45.       $( document).on('click','div.open .remove-row',function() {
  46.           if ($(this).parents('tbody').find('tr').length >1) {
  47.             $(this).parents('tr').remove(); 
  48.         }
  49.         return false;
  50.       });
  51.     });
  52.     </script>
  53.     <?PHP
  54.     }
  55.  
  56. // widget
  57. public function widget($args,$instance['title']);
  58. // This is where you run the code and display the output
  59.     foreach ($this->courses as $course_key => $course_info) {
  60.         echo $course_info['coursecode'] .'<br>'; 
  61.         foreach ($instance['repeat'][$course_key ]["fall"] as $k=>$field) {
  62.             echo 'Fall Term ' . $field .' / ';
  63.             echo 'Winter Term ' . $instance['repeat'][$course_key ]["winter"][$k] .'<br>';
  64.         }
  65.     }
  66.  
  67.     echo $args['after_widget'];
  68. }
  69.  
  70. // form
  71. public function form($instance)
  72. {
  73.     if (isset($instance[ 'title' ])) {
  74.         $title = $instance[ 'title' ];
  75.     } else {
  76.         $title = __('New title','dynamic_widget_domain');
  77.     }
  78. // Widget admin form
  79.     $repeatable_fields= isset ( $instance['repeat'] ) ? $instance['repeat'] : array();
  80.      ?>
  81.  
  82. <?PHP foreach ($this->courses as $course_key => $course_info) { ?>
  83. <label><?PHP echo $course_info['coursecode']; ?></label>
  84. <table id="repeatable-fieldset-one" width="100%">
  85. <thead>
  86.   <tr>
  87.     <th width="40%">Fall Term</th>
  88.     <th width="40%">Winter Term</th>
  89.     <th width="8%"></th>
  90.     <th width="8%"></th>
  91.   </tr>
  92. </thead>
  93. <tbody>
  94. <?PHP
  95.  
  96. if ($repeatable_fields[$course_key ]["fall"] || $repeatable_fields[$course_key ]["winter"]) :
  97. foreach ($repeatable_fields[$course_key ]["fall"] as $k=>$field) {
  98.     ?>
  99. <tr>
  100.   <td><input type="text" class="widefat" name="<?PHP echo $this->get_field_name( 'repeat' )?>[<?PHP echo $course_key;?>][fall][]" value="<?PHP echo $field; ?>" /></td>
  101.  
  102.   <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>
  103.  
  104.   <td><a class="button remove-row" href="#">Remove</a></td>
  105.   <td><a class="button add-row" class="button" href="#">Add</a></td>
  106.  
  107. </tr>
  108. <?PHP
  109. } else :
  110. // show a blank one
  111.  
  112. ?>
  113. <tr>
  114.   <td><input type="text" class="widefat" name="<?PHP echo $this->get_field_name( 'repeat' )?>[<?PHP echo $course_key;?>][fall][]" /></td>
  115.  
  116.  
  117.   <td><input type="text" class="widefat" name="<?PHP echo $this->get_field_name( 'repeat' )?>[<?PHP echo $course_key;?>][winter][]" value="" /></td>
  118.  
  119.   <td><a class="button remove-row" href="#">Remove</a></td>
  120.   <td><a class="button add-row" class="button" href="#">Add</a></td>
  121.  
  122. </tr>
  123. <?PHP endif; ?>
  124. </tbody>
  125. </table>
  126. <?PHP } ?>
  127.  
  128.  
  129. <!-- empty hidden one for jQuery -->
  130.  
  131. <?PHP
  132.  
  133. }
  134.  
  135. // update
  136. public function update($new_instance,$old_instance)
  137. {
  138.     $instance = array();
  139.     $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
  140.     $instance['repeat'] = array();
  141.  
  142.     if ( isset ( $new_instance['repeat'] ) )
  143.     {
  144.         foreach ( $new_instance['repeat'] as $k =>$value )
  145.         {
  146.                 $instance['repeat'][$k] = $value;
  147.         }
  148.     }
  149.  
  150.     return $instance;
  151. }
  152. } // Class dynamic_widget ends here
  153.  
  154. // Register and load the widget
  155. function wpb_load_widget()
  156. {
  157.     register_widget('dynamic_widget');
  158. }
  159. add_action('widgets_init','wpb_load_widget');

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

  1. array (size=4)
  2.   'Chemistry' => 
  3.     array (size=2)
  4.       'fall' => 
  5.         array (size=1)
  6.           0 => string 'AAA' (length=3)
  7.       'winter' => 
  8.         array (size=1)
  9.           0 => string 'BBBBBBB' (length=7)
  10.   'Biology' => 
  11.     array (size=2)
  12.       'fall' => 
  13.         array (size=2)
  14.           0 => string 'CCCCCC' (length=6)
  15.           1 => string 'EEEEEEE' (length=7)
  16.       'winter' => 
  17.         array (size=2)
  18.           0 => string 'DDDD' (length=4)
  19.           1 => string 'FFFFFFFF' (length=8)
  20.   'Math' => 
  21.     array (size=2)
  22.       'fall' => 
  23.         array (size=1)
  24.           0 => string 'GGGGGGG' (length=7)
  25.       'winter' => 
  26.         array (size=1)
  27.           0 => string 'HHHHHH' (length=6)
  28.   'Physics' => 
  29.     array (size=2)
  30.       'fall' => 
  31.         array (size=1)
  32.           0 => string 'IIIIIIIII' (length=9)
  33.       'winter' => 
  34.         array (size=1)
  35.           0 => string 'JJJJJJJJ' (length=8)

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作