0

クリックに基づいて画像を変更する場所をクリックすると機能するラジオボタンのセットがあります。

ここで、ドロップダウン ボックスの選択に基づいて画像を変更したいと考えています。これが私のスクリプトの一部です。「タイトル」の使い方は不適切ですか？

**また、関数内に関数があるのは適切ではありません... ?.change(function () {によって既にトリガーされている場合、その部分が必要かどうかを把握しようとしています。select's onchangeありとなしで試してみましたが、まだ画像を置き換えていません。

<script type="text/javascript">
    function doCalc(){
    var roomX = $('#room_str').val();
    var otherroomX = $('#other_room').val();
    var qtyX = $('#qty_str').val();
    // etc. etc..
    // below is code that pertains to what i'm trying to do 

    var imgFldr2 = '/wp-content/uploads/2012/07/';
    var imagename = $('#laserlite_color option:selected').attr('title');
    $('#valance-colors-placeholder img').attr('src', imgFldr2 + imagename); 
    });
    // more code

そしてドロップダウンボックス...

<select name="laserlite_color" id="laserlite_color" onchange="doCalc();">
    <option value="Gold 301" title="Gold-301.jpg">Gold</option>
    <option value="Chrome 303" title="Chrome-301.jpg">Chrome</option>
    <option value="Light Oak 304" title="Light-Oak-304.jpg">Light Oak</option>
    <option value="Dark Walnut 302" title="Dark-Walnut-302.jpg">Dark Walnut</option>
    <option value="White 307" title="White-307.jpg">White</option>
    <option value="Silk 630" title="Silk-630.jpg">Silk</option>
    <option value="Lilac 688" title="Lilac-688.jpg">Lilac</option>
    <option value="Blush 672" title="Blush-672.jpg">Blush</option>
    <option value="Sage 655" title="Sage-655.jpg">Sage</option>
    <option value="Denim 641" title="Denim-641.jpg">Denim</option>
    <option value="Black Satin 684" title="Black-Satin-684.jpg">Black Satin</option>
</select><br>

<div id="valance-colors-placeholder"><img src="/wp-content/uploads/2012/07/Gold-301.jpg"></div>

編集: 以下のニックのコードの一部でコードを更新しました。このウェブサイトで、プログラマーが使用するように言ったことを覚えていることを説明したいと思いalert('whatever variable you need to see returned here');ます。これは、コードのどの部分が適切に機能しているか、または機能していないかを確認するのに役立ちます。ありがとう！！！

4

4 に答える 4

2

はい、ここで行っているのは、誰かが select を変更するたびに onchange イベント ハンドラーを追加することです。それ以上に、イベント ハンドラーは、「これ」があなたが思っているものではないので、あなたが思っていることをしません。「this.title」に基づいて画像を設定しようとすると、「this」は選択されたオプションではなく選択タグを参照するため、おそらく未定義または空の文字列です。

それはさておき、私がお勧めするのは、html の select の onchange 属性を削除し、スクリプト タグで jQuery に得意なことをさせることです。

$().ready(function() {
    $('#laserlite_color').change(function () {
        var roomX = $('#room_str').val();
        // ... the rest of what you're doing in doCalc ...
        var imgFldr2 = '/wp-content/uploads/2012/07/';
        var filename = $('#laserlite_color option:selected').attr('title');
        $('#valance-colors-placeholder img').attr('src', imgFldr2 + filename);
    });
});

(ab) title 属性の使用に関しては、オプションの値とファイル名の間に厳密な関係があるべきだと考えるかもしれません。その場合は、select タグで jQuery の val() を使用できます。幸いなことに、値から画像ファイルへの 1 対 1 のマッピングがあるようです。代わりに、ファイル名行に対してこれを試してください：

var filename = $('#laserlite_color').val().replace(' ', '-') + '.jpg';
于 2012-07-17T22:52:52.480 に答える
1

select存在しないタイトルを参照していて、空の文字列を返していました。title属性を持つオプションです。onchange が呼び出されない場合は、それを入れる必要があるかもしれません$(document).ready(...)

$('#laserlite_color').change(function () {
      var title = this.options[this.selectedIndex].title;
      $('#valance-colors-placeholder img').attr('src', imgFldr+title); 
});
于 2012-07-17T23:17:37.843 に答える
1

これをテストします。

HLML

<select name="laserlite_color" id="laserlite_color"  onchange="doCalc(this);">

Javascript

function doCalc(selectobj) {
        var value1 = selectobj[selectobj.selectedIndex].value
        var text1 = selectobj[selectobj.selectedIndex].text
       //your code
       //your code
       //your code
         $('#valance-colors-placeholder img').attr('src', imgFldr + value1);
    }

JavaScript 関数でイベントをキャッチするために、イベントの値を送信する必要があります。

于 2012-07-17T23:00:25.513 に答える