Question

当从同一表单中的下拉列表中选择一个选项时，我正在使用jQuery .change来填充表单输入字段。它在独立的HTML文档中工作正常，但在WordPress小部件管理中使用时，选择该选项时，字段不会动态填充。是什么导致失败？就我的编码而言，所有相关的ID都匹配。请查看以下编码。可以在JSFiddle demo

查看工作职能

这是正在使用的编码

function update( $new_instance, $old_instance ) {
$instance['postop']             = ($new_instance['postop']);
$instance['postopleft']         = ($new_instance['postopleft']);
$instance['postopright']        = ($new_instance['postopright']);
$instance['posmiddle']          = ($new_instance['posmiddle']);
$instance['posbottomleft']      = ($new_instance['posbottomleft']);
$instance['posbottomright']     = ($new_instance['posbottomright']);
$instance['posbottom']          = ($new_instance['posbottom']);
$instance['presets']            = esc_attr($new_instance['presets']);

return $instance;
}

function form( $instance ) {

$postop = isset($instance['postop']) ? ($instance['postop']) : '[titleh3]';
$postopleft = isset($instance['postopleft']) ? ($instance['postopleft']) : '[date]';
$postopright = isset($instance['postopright']) ? ($instance['postopright']) : '';
$posmiddle = isset($instance['posmiddle']) ? ($instance['posmiddle']) : '[image][text][br][readmore]';
$posbottomleft = isset($instance['posbottomleft']) ? ($instance['posbottomleft']) : '[comments]';
$posbottomright = isset($instance['posbottomright']) ? ($instance['posbottomright']) : '[category]';
$posbottom = isset($instance['posbottom']) ? ($instance['posbottom']) : '';
$presets = isset($instance['presets']) ? ($instance['presets']) : 'default';

//form field IDs
$fieldpresets = $this->get_field_id('presets');
$fieldpostop = $this->get_field_id('postop');
$fieldpostopleft = $this->get_field_id('postopleft');
$fieldpostopright = $this->get_field_id('postopright');
$fieldposmiddle = $this->get_field_id('posmiddle');
$fieldposbottomleft = $this->get_field_id('posbottomleft');
$fieldposbottomright = $this->get_field_id('posbottomright');
$fieldposbottom = $this->get_field_id('posbottom');

//inline jQuery 
echo "
<script type=\"text/javascript\">
jQuery(document).ready(function(){
        jQuery('#$fieldpresets').change(function() {
          var curRowId = jQuery('#$fieldpresets').val();
          jQuery('#$fieldpostop').val( jQuery('#' + curRowId + ' span.postop').text() );
          jQuery('#$fieldpostopleft').val( jQuery('#' + curRowId + ' span.postopleft').text() );
          jQuery('#$fieldpostopright').val( jQuery('#' + curRowId + ' span.postopright').text() );
          jQuery('#$fieldposmiddle').val( jQuery('#' + curRowId + ' span.posmiddle').text() );
          jQuery('#$fieldposbottomleft').val( jQuery('#' + curRowId + ' span.posbottomleft').text() );
          jQuery('#$fieldposbottomright').val( jQuery('#' + curRowId + ' span.posbottomright').text() );
          jQuery('#$fieldposbottom').val( jQuery('#' + curRowId + ' span.posbottom').text() );
        });
    });
</script>
";
?>

//the widget admin form select
<select id="<?php echo $presets; ?>" name="<?php echo $presets; ?>">
<option value="default" selected>Default</option>
<option value="Style2">Style2</option>
</select>

//this is the data to be filled dynamically into the input fields following
<ul>
<li id="default">
<span class="top">[title]</span>
<span class="topleft">[date]</span>
<span class="topright">[comments]</span>
<span class="middle">[image][text]</span>
<span class="bottomleft">[readmore]</span>
</li>

<li id="Style2">
<span class="top">[title]</span>
<span class="middle">[image][text]</span>
<span class="bottom">[date][comments]</span>
<span class="bottomleft">[readmore]</span>
</li>

</ul>

<input class="widefat" id="<?php echo $fieldpostop; ?>" name="<?php echo $this->get_field_name('postop'); ?>" type="text" value="<?php echo $postop; ?>" placeholder="Head" />
        <input class="widefat" id="<?php echo $fieldpostopleft; ?>" name="<?php echo $this->get_field_name('postopleft'); ?>" type="text" value="<?php echo $postopleft; ?>" placeholder="Top Left" />
        <input class="widefat" id="<?php echo $fieldpostopright; ?>" name="<?php echo $this->get_field_name('postopright'); ?>" type="text" value="<?php echo $postopright; ?>" placeholder="Top Right" />
        <input class="widefat" id="<?php echo $fieldposmiddle; ?>" name="<?php echo $this->get_field_name('posmiddle'); ?>" type="text" value="<?php echo $posmiddle; ?>" placeholder="Middle" />
        <input class="widefat" id="<?php echo $fieldposbottomleft; ?>" name="<?php echo $this->get_field_name('posbottomleft'); ?>" type="text" value="<?php echo $posbottomleft; ?>" placeholder="Bottom Left" />
        <input class="widefat" id="<?php echo $fieldposbottomright; ?>" name="<?php echo $this->get_field_name('posbottomright'); ?>" type="text" value="<?php echo $posbottomright; ?>" placeholder="Bottom Right" />
        <input class="widefat" id="<?php echo $fieldposbottom; ?>" name="<?php echo $this->get_field_name('posbottom'); ?>" type="text" value="<?php echo $posbottom; ?>" placeholder="Foot" />

<?php }//form $instance

更新：我从ready（function（）中删除了$，现在选择了一个选项时正在填充文本字段，但是每个字段获取相同的数据3次例如：[title] [title] [title]

为什么会发生这种情况？

为什么jQuery函数在WordPress小部件管理中失败，但仍然适用于独立的HTML文档

0 个答案: