3

ワードプレスのテーマを作成しています。選択する画像をクリックして表示できる選択ボックスが必要です。

現在、その機能のために、テキスト付きのドロップダウンリストを選択しています。

<select id='selectbox'>
    <option >Airplane</option>
    <option >Bowling</option>
    <option >Alarm</option>
</select>

しかし、画像があり、テキストがない選択リストが必要です。そのようなことは可能ですか？jqueryが機能すると思います。しかし、ネット上で答えを見つけることができません。

わかりました私はそれを機能させるために一日を費やしましたが、私はあまりにも愚かだと思います. 考えられるすべての例と解決策で、それを機能させるのにいくつかの問題があります。

これは、私が使用するメタボックスのコード全体ですhttp://pastebin.com/1kvYz8Mgこれはワードプレスのテーマ用であり、他のすべては必要に応じて機能します。取得できないのは、選択ボックスをある種の画像に置き換えることができるかどうかだけですリストを使用して、フィールドに適切な画像を選択します。

4

7 に答える 7

0

この例では PHP を使用しており、データベースから値 0 から 3 を取得し、画像の不透明度と選択ボックスの値を次のように設定します。

JavaScript

<script type="text/javascript">
function ChangeLights(selector){
        if (selector == 0){
            document.getElementById("Light0").style.opacity = "1";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById(\'Run_Status\').selectedIndex = 0;
        }
        if (selector == 1){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "1";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById(\'Run_Status\').selectedIndex = 1;
        }
        if (selector == 2){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "1";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById(\'Run_Status\').selectedIndex = 2;
        }
        if (selector == 3){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "1";
            document.getElementById(\'Run_Status\').selectedIndex = 3;
        }
}
</script>

php

$Run_Number['Run_Status'] = 0;//test value
echo '    
<select name="Run_Status" id="Run_Status">
    <option value="0" '.($Run_Number['Run_Status'] == "0" ? "selected":"").'>Not Ready</option>
    <option value="1" '.($Run_Number['Run_Status'] == "1" ? "selected":"").'>Ready</option>
    <option value="2" '.($Run_Number['Run_Status'] == "2" ? "selected":"").'>In Transit</option>
    <option value="3" '.($Run_Number['Run_Status'] == "3" ? "selected":"").'>Delivered</option>
    </select>

    <img id="Light0" class="light" src="images/light-red.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 0 ? '1':'.2').';" title="Not Ready" onclick="ChangeLights(\'0\')">
    <img id="Light1" class="light" src="images/light-rey.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 1 ? '1':'.2').';" title="Ready" onclick="ChangeLights(\'1\')">
    <img id="Light2" class="light" src="images/light-yel.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 2 ? '1':'.2').';" title="In Transit" onclick="ChangeLights(\'2\')">
    <img id="Light3" class="light" src="images/light-gre.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 3 ? '1':'.2').';" title="Delivered" onclick="ChangeLights(\'3\')">
';

確かにこれを行うためのより良い方法があるでしょうが、それは機能します

于 2015-01-29T12:07:28.723 に答える
0

これを行うには、対応する画像を個別の「div」ブロックに配置する必要があります。各 div は display:none に設定されています。

例えば

 <div id="0" style="display:block"><img src="your Airplane image path" /></div>
 <div id="1" style="display:none"><img src="your Bowling image path" /></div>
 <div id="2" style="display:none"><img src="your Alarm image path" /></div>

次に、選択に onchange イベント ハンドラーを追加して、画像をブロックとして表示する必要があります。例えば

 <script>
  function changeSelectBox() {
      $("#0,#1,#2").hide();

      $('#' + document.getElementById('selectbox').selectedIndex).show();
 }
 </script>

 <select id='selectbox' onchange="return changeSelectBox();">
     <option selected>Airplane</option>
     <option >Bowling</option>
     <option >Alarm</option>
 </select>

次に、jquery を に追加すれば完了です。選択ドロップダウンを変更すると、表示される画像も変更されます。

注：これを試してみずに書いたので、どこかにセミコロンエラーがあるかもしれません。

于 2013-02-07T15:17:29.073 に答える
0

ほぼ純粋な CSS で試してみます。

ラジオを使用して、選択した値 ( $_POST['thing']) を格納し、関連付けられたラベルでラップします。ただし、クリック時に画像の表示を制御するのは少し難しいです。リンクを使用すると:target、「選択」をクリックしたときにすべての画像を表示できますが、選択が行われたときに他の画像を非表示にする方法が必要です。onclickそのため、ラベルに属性を追加して#selectハッシュを削除する必要がありました。CSSでそれを隠す方法を誰かが知っているなら、ぜひ聞いてみたいです:)

jQuery を使用すると、これは非常に簡単に実装できます。内部に画像があり、入力フィールドが非表示の DIV があるとします。

$('.select').each(function(){
  var input = $('input', this),
      images = $('img', this),
      selecting = false;

  images.hide().click(function(){             

    // if the select box is open and a image was cliked
    if(selecting){
      input.val($(this).index() + 1);
      images.not(this).hide();

    // if select box is closed and the active image was clicked
    }else{     
      images.show();             
    }

    selecting = !selecting;

  }).eq(input.val() - 1).show();    

});

入力フィールド ( thing) には、画像のインデックスが格納されます...

(フィドル)

于 2013-02-07T18:28:50.550 に答える
0

これを試して：

jQuery:

$("#selectbox").change(function(){
    var selectedIndex = $("#selectbox")[0].selectedIndex;

    $('ul#images li').each(function(index) {
        if ( index === selectedIndex ) { $(this).show(); }
        else { $(this).hide(); }
    });
});

html:

<select id="selectbox">
    <option >Airplane</option>
    <option >Bowling</option>
    <option >Alarm</option>
</select>

<ul id="images">
    <li><img src="sample1.jpg" /></li>
    <li><img src="sample2.jpg" /></li>
    <li><img src="sample3.jpg" /></li>
</ul>
于 2013-02-07T15:09:14.277 に答える
0

次のようなものを探していると思います: Javascript image dropdown 2.0

于 2013-02-07T23:29:32.210 に答える
0

おそらく、RADIO ボタン リストを使用して、各 RADIO INPUT に添付された LABEL タグ内に画像を配置します。

これは、デモ用の簡単な jsfiddle です。 http://jsfiddle.net/TnFma/

function createImageSelectList(id, name, arrOptions) {
    var $elm = $("#" + id);
    for(var x = 0; x<arrOptions.length; x++) {
        var opt = arrOptions[x];
        var subId = name + "_" + opt.value;
        var $rad = $("<input />");
        $rad.attr("type", "radio");
        $rad.attr("value", opt.value);
        $rad.attr("name", name);
        $rad.attr("id", subId);
        var $lbl = $("<label />");
        $lbl.attr("for", subId);
        $lbl.append($("<img />")
            .attr("src", $("#" + opt.image).attr("src")));
        $elm.append($lbl);
        $elm.append($rad);
    }
}
于 2013-02-07T15:35:35.207 に答える