1

次のことを行う必要がある4つの選択ボックスがあります。

3 つの選択ボックスすべてから 1 つのオプションしか選択できないため、一度に 1 つの選択ボックスにのみ値を含めることができます。これで、この部分が機能します。

機能せず、上記の機能を壊す部分: 選択ボックスのいずれかで値を選択するたびに、空の div に画像を追加する必要があります: 各選択ボックスは人 (最初の選択を除く) を表し、その人物を選択すると、彼の画像が div (#reps) に表示されます。

どうすればいいですか？

これが私のフィドルです

<select>
    <option>---</option>
    <option>Office</option>
</select>
<br />
<br />
<select>
    <option>---</option>
    <option>Mark</option>
</select>
<br />
<br />
<select>
    <option>---</option>
    <option>Magnus</option>
</select>
<br /><br />
<select>
    <option>---</option>
    <option>Adii</option>
</select>
<br />
<br />

<div id="reps">

</div>

jQuery:

var a = 'http://woothemes.wpengine.netdna-cdn.com/wp-content/themes/woo/images/team/';
var x = 'mark.jpg';
var y = 'magnus.jpg';
var z = 'adii.jpg';

$('select').eq(0).find('option').eq(1).attr('selected','selected');

$('select').on('change', function () {
    $('select').not(this).val("---");

    //the problem area below that breaks my cod as well, remove to see
    if(this.eq() == 1){
        $('#reps').append('<img src="'a + x'" />');
    }
    else if(this.eq() == 2){
        $('#reps').append('<img src="'a + y'" />');
    }

    else if(this.eq() == 3){
        $('#reps').append('<img src="'a + z'" />');
    }
});
4

4 に答える 4

1

ほら、いくつかのマイナーなjQueryエラーがあり、私はそれらを修正しました。

http://jsfiddle.net/2DzUV/64/

var a = 'http://woothemes.wpengine.netdna-cdn.com/wp-content/themes/woo/images/team/';
var x = 'mark.jpg';
var y = 'magnus.jpg';
var z = 'adii.jpg';

$('select').eq(0).find('option').eq(1).attr('selected','selected');

$('select').on('change', function () {
    $('select').not(this).val("---");
    $('#reps').empty();
    //the problem area below that breaks my cod as well, remove to see
    if($(this).index() == 0){        
        $('#reps').append('<img src="'+a+x+'"/>');
    }
    else if($(this).index() == 3){
        $('#reps').append('<img src="'+a+y+'"/>');
    }

    else if($(this).index() == 6){
        $('#reps').append('<img src="'+a+z+'" />');
    }
});

注意: 変更された eq 要素を見つけるには、.index()メソッドを使用する必要があります。<br/>タグのため、選択のインデックスは0、3、および6です。<br/>タグもカウントしています。0,1,2 などのインデックスが必要な場合は<br/>、HTML コードからタグを削除する必要があります:)、CSS を使用して選択ボックスを配置します。

于 2013-04-26T11:34:36.750 に答える
1

img タグの文字列 concat にタイプミスがあります (一部の + 記号が欠落しています)。

本当の問題は、現在の要素の検索です。is を使用して、現在の要素が特定のインスタンスであるかどうかを確認できます。

現在一致している要素のセットをセレクター、要素、または jQuery オブジェクトに対してチェックし、これらの要素の少なくとも 1 つが指定された引数と一致する場合は true を返します。

コード：

if ($('select').eq(0).is($(this))) {
    $('#reps').append('<img src="' + a + x + '" />');
} else if ($('select').eq(1).is($(this))) {
    $('#reps').append('<img src="' + a + y + '" />');
} else if ($('select').eq(2).is($(this))) {
    $('#reps').append('<img src="' + a + z + '" />');
}

作業フィドル: http://jsfiddle.net/IrvinDominin/jjyh5/

于 2013-04-26T11:35:42.797 に答える
0

イメージ名をオプション値で参照しないのはなぜですか?

HTML

[...]
<select>
    <option>---</option>
    <option value="adii.jpg">Adii</option>
</select>
[...]

JS

[...]
$('select').on('change', function () {
    $('select').not(this).val("---");
    $('#reps').html('<img src="' + a + $(this).val() + '" />');

});

ここでフィドル：http://jsfiddle.net/2DzUV/61/

于 2013-04-26T11:36:35.417 に答える