- このトピックには6件の返信、2人の参加者があり、最後に
により1ヶ月、 2週前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】25.3.3
【お使いの Snow Monkey Blocks のバージョン】20.4.3
【お使いの Snow Monkey Editor のバージョン】9.3.3
【お使いのブラウザ】chrome
【当該サイトのURL】開発中のため無しいつもお世話になっております。
タイトルのとおりsnow monkey formsでラジオボタンを設定したとき、選択肢によって画像を表示／切り替えしたいです。
v6.3.0でフィルターフックが実装されたのでこれを使って書き換えればできるのかなとは思うのですが（サンプルコードでテキストを書き換えることはできました）、具体的にどのように書けば良いかのかというところで詰まってしまいました…
もし上記の選択肢によって画像を表示／切り替えが実現可能でしたら、どうすれば実現できるかアドバイスいただけますでしょうか？
よろしくお願い致します。
いいねをした人: 居ません例えば
[x] 晴れ [ ] 雨 <img src="..." alt="晴れ">というフォームがあったとして、「雨」を選択すると画像も「晴れ」から「雨」に変わる、みたいなことでしょうか？
いいねをした人: 居ません＞キタジマさん
ご返信ありがとうございます。
まさにそんな感じです！
たとえば資料請求やサンプル請求のフォームで、A、B、C、Dといった4つの選択肢があって、選択するとそれぞれのイメージが表示されるようにしたい（他のイメージは非選択時は隠しておきたい）といった感じです。
自分なりに調べてもみたのですが、jQueryと連携させてチェック時の条件分岐をする（？）といった方法でできる？ようなところまでは行き着いたのですが、実際に試してみても全くうまくいかず、完全にお手上げ状態でした。。。
アドバイスいただけると大変有難いです…！
何卒よろしくお願いいたします。
いいねをした人: 居ませんなるほどです。Snow Monkey Forms 自体には特にそういった機能はないので、独自に JavaScript や jQuery で仕組みを作る形になります。
僕も特にそういうのをつくった経験はないので、試したコードがあるのであればそれを共有してください！（それをもとにやったほうが簡単かなと思うので）
いいねをした人:＞キタジマさん
ご返信いただきありがとうございます！
僕も特にそういうのをつくった経験はないので、試したコードがあるのであればそれを共有してください！（それをもとにやったほうが簡単かなと思うので）
こちらかしこまりました。
ただ私自身がJavaScriptやjQueryの知識に乏しくほとんど何もわからない素人なので、色々検索しつつChatGPTと問答しながら試してみたという状況なのですが…ChatGPTも最初にsnow monkey formsのコードを読み込ませてそれを前提にしているはずが途中でコードを無視したりと、結局うまくいかずじまいでした。。。
ですので参考になるかはわかりませんが、一応、最終的に提示されたコードを共有させていただきます。
・snow monkey formsのコード
add_filter( 'snow_monkey_forms/checkboxes/options', function( $options, $name, $setting ) { if ( 'checkboxes-xxxxx' === $name ) { return array( 'option-1' => 'あいうえお', 'option-2' => 'かきくけこ', 'option-3' => 'さしすせそ', ); } return $options; }, 10, 3 );・JavaScript
jQuery(document).ready(function($) { // チェックボックスの選択状態が変わるたびに実行 $('[name="checkboxes-xxxxx[]"]').change(function() { // すべての関連画像を非表示にする $('.image-for-checkbox').hide(); // 選択されているチェックボックスに応じて画像を表示 $('[name="checkboxes-xxxxx[]"]:checked').each(function() { var selectedValue = $(this).val(); // 対応する画像のIDに基づいて画像を表示（例: #image-for-option-1） $('#image-for-' + selectedValue).show(); }); }); });・画像表示（HTML）
<img id="image-for-option-1" src="画像のURL" style="display:none;" alt="説明">・画像表示（PHP）
<img id="image-for-option-1" src="<?php echo get_template_directory_uri(); ?>/path/to/image.jpg" style="display:none;" alt="説明">以上になります。
お手数ですがお手すきの際にご確認いただけますと幸いです。いいねをした人: 居ませんやってみたのですが、結論から言うと、実現方法がわかりませんでした。何とか無理くりやればできないことはないのかもしれませんが、ちょっと僕の技術力ではメンテナブルな良い方法が思い浮かばず…。
一応頂いたコードでご指摘できる部分については書いておきます。
・snow monkey formsのコード
checkboxes-xxxxxの選択肢を追加しているコードに見えますが、特に動的に何かをしているようには見えなかったので、動的に項目の増減等が不要なのであればフォームの作成画面で設定してしまうのが簡単だと思います。・JavaScript
Snow Monkey Forms は入力・確認・完了・エラーの画面遷移を JavaScript で動的に行っているので、
$('[name="checkboxes-xxxxx[]"]').change(function()のような要素の指定だと、画面遷移したら DOM からイベントが取れてしまいます（JavaScript で動的に再取得された要素は、同じ名前でも別の要素と判定される）。なので、動的な要素にも対応させるには
$(document).on('change', '[name="checkboxes-1hojjnt8j[]"]', function() {のような書き方に変える必要があります。—
入力画面については、頂いたコードをベースに↑の修正を入れて調整すれば実現できるそうでしたが、そこから管理画面にいって入力画面に戻ったり、バリデーションエラーがあってエラー画面になったりしたときにも選択肢に応じて正しく画像を表示させるのが、どうやったら良いのだろう…という感じでした。
いいねをした人:＞キタジマさん
返信いただきありがとうございます！
またコードのアドバイスありがとうござます。
特に動的に何かをしているようには見えなかったので、動的に項目の増減等が不要なのであればフォームの作成画面で設定してしまうのが簡単だと思います。
なるほど、アップデート情報のサンプルコードを元に選択肢を上書きした感じだったのですが、これ自体は必須ではなくフォームのほうでラジオボタンを設定するだけで問題ない感じなんですね。
入力画面については、頂いたコードをベースに↑の修正を入れて調整すれば実現できるそうでしたが、そこから管理画面にいって入力画面に戻ったり、バリデーションエラーがあってエラー画面になったりしたときにも選択肢に応じて正しく画像を表示させるのが、どうやったら良いのだろう…という感じでした。
やはり簡単にはいかなそうですね…
キタジマさんで良い方法が思いつかないのであれば到底今の私には実現できないと思いますので…ちょっと今々の実装は一旦諦めることとします。。。
選択肢に応じて画像を出さなくても、注釈的にポップアップを添えておくくらいでも同じ目的は果たせそうですので、代替手段で対応してみます。
お忙しい中アドバイスいただきありがとうございました！
いいねをした人: 居ません
- トピック「snow monkey formsのラジオボタン選択時に画像を表示／切り替えたい」には新しい返信をつけることはできません。