WordPressのウィジェットを作成しており、ドロップダウンボックスで数字を選択されたらその数だけテキストフィールドを表示させたいと思っています。
以下のようなjQueryを記載しました。
for文で例えば
iが1の時は
get_field_id('imageurl1')
iが2の時は
get_field_id('imageurl2')
としたいのですが、どのように記載すれば良いかわからず、ご教示いただけませんでしょうか。
jQueryの変数をPHPで使えるようにしないといけない?と思い、調べるとAjaxなどが出てきたのですが今回でもそのような必要があるのでしょうか・・・?
<script> jQuery(function() { jQuery('select').change(function() { var settingnumber = jQuery(this).val(); var okikaetext = ""; for (var i=0; i<settingnumber; i++) { okikaetext = okikaetext + '<p><label for="<?php echo $this->get_field_id('imageurl'); ?>">画像URL:</label><input type="url" name="imageurl" class="widefat" id="<?php echo $this->get_field_id('imageurl'); ?>" name="<?php echo $this->get_field_name('imageurl'); ?>" value="<?php echo esc_attr(@$instance['imageurl']); ?>"></p>' } jQuery('.okikae').html(okikaetext); }); });
大変恐れ入りますが、以上よろしくお願いいたします。
以下、追記いたします。
以下のようにWP_Widgetを継承したクラスのform ファンクションに記載しています。
やりたいこととしては、指定した数だけテキストフィールドを増やしたいと思っています。
(ギャラリーウィジェットのようなものが理想なのですがframeの使い方がわからないのでこの方法で試しています・・・。)
以下、function.phpに記載しているコードです。
<?php class Images_Slider extends WP_Widget { function Images_Slider() { $widget_option = array('description' => '複数の画像とリンクを設定'); parent::__construct(false, $name = '画像スライダー', $widget_option); } function form($instance) { ?> <div class="okikae"> <p>もとの内容です </p> </div> <form method="post" action="confirm"> <div class="form-setting-number" id="form-setting-number"> <p>設定する画像の数</p> <select id="form-setting-number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </form> <form method="post" action="confirm"> <div class="form-block" id="form_block[0]"> <!-- Closeボタン --> <span class="close" title="Close" style="display: none;">-</span><script> //セレクトボックスが切り替わったら発動 jQuery(function() { jQuery('select').change(function() { console.log("値変更されました"); //選択したvalue値を変数に格納 var settingnumber = jQuery(this).val(); var okikaetext = ""; for (var i=0; i<settingnumber; i++) { var idname="imageurl"+(i+1); console.log("id name:"+idname); okikaetext = okikaetext + ' <p><label for="<?php echo $this->get_field_id(idname); ?>">画像URL:</label><input type="url" name="imageurl" class="widefat" id="<?php echo $this->get_field_id('imageurl'); ?>" name="<?php echo $this->get_field_name('imageurl'); ?>" value="<?php echo esc_attr(@$instance['imageurl']); ?>"></p>' } jQuery('.okikae').html(okikaetext); }); }); </script><p>Name:<input type="text" name="name[0]" id="name[0]" /></p> <p> <label for="<?php echo $this->get_field_id('imageurl'); ?>">画像URL:</label> <input type="url" name="imageurl" class="widefat" id="<?php echo $this->get_field_id('imageurl'); ?>" name="<?php echo $this->get_field_name('imageurl'); ?>" value="<?php echo esc_attr(@$instance['imageurl']); ?>"> </p> <p><label for="<?php echo $this->get_field_id('targeturl'); ?>">リンク先:</label> <input type="url" name="targeturl" class="widefat" id="<?php echo $this->get_field_id('targeturl'); ?>" name="<?php echo $this->get_field_name('targeturl'); ?>" value="<?php echo esc_attr(@$instance['targeturl']); ?>"> </p> </div> </form>
大変恐れ入りますが、お気づきの点ございましたらなんでもご指摘いただけると幸いです・・・。
回答1件
あなたの回答
tips
プレビュー