1

私は2つの選択リストを持っています:

<select id="boy" class="list">
    <option value="">Boy picture...</option>
    <option value="1" >Picture 1</option>
    <option value="2" >Picture 2</option>
    <option value="3" >Picture 3</option>
    <option value="4" >Picture 4</option>
</select>
<select id="girl" class="list">
    <option value="">Girl picture.... </option>
    <option value="a">Picture 1</option>
    <option value="b">Picture 2</option>
    <option value="c">Picture 3</option>
    <option value="d">Picture 4</option>
</select>

別々の div タグに両方の選択リストを含む画像をロードしたいと考えています。リストでをクリックすると男の子の写真をロードしたい、リストでPicture 1クリックすると女の子の写真をロードしたい...がロードされたとき、ボタンを押すと ピクチャ 2 がロードされます..など。boyPicture 1girlPicture 1Next

私はそれを行う方法がわかりません。

私のコード

4

1 に答える 1

1

私が正しく理解している場合は、選択のすべてのオプションに画像を添付し、オプションが選択されたときに画像を表示する必要があります。

そうするために、男の子と女の子の画像の値を使用してオプションにカスタム属性を設定し、myImgランダムな画像を使用します (画像を取得するのに時間がかかります)。

<select id="boy" class="list">
    <option value="">Boy picture...</option>
    <option value="1" myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 1</option>
    <option value="2"  myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 2</option>
    <option value="3"  myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 3</option>
    <option value="4"  myImg="http://randomimage.setgetgo.com/get.php?height=50&width=50">Picture 4</option>
</select>

でchange event属性を取得し、画像の div$('option:selected', this).attr('myImg')の css を設定します。background-image

$('#boy').on('change', function () {
    $('select').removeClass('activeList');
    $(this).addClass('activeList');
    $(".picture").css('background-image', 'url(' + $('option:selected', this).attr('myImg') + ')');
});
$('#girl').on('change', function () {
    $('select').removeClass('activeList');
    $(this).addClass('activeList');
    $(".picture").css('background-image', 'url(' + $('option:selected', this).attr('myImg') + ')');
});

ここに実用的なフィドルがあります：http://jsfiddle.net/IrvinDominin/LT8zc/

私がこれを開発するのを楽しんだ質問を理解していない場合:-)

編集

必要に応じて、画像の繰り返しなしを次のように設定します。

$(".picture").css({
    'background-image': 'url(' + $('option:selected', this).attr('myImg') + ')',
    'background-repeat': 'no-repeat'
});

または、通常の css ルールとして定義します (jQuery 経由では設定されません)。

フィドル: http://jsfiddle.net/IrvinDominin/LT8zc/1/

于 2013-06-07T17:26:11.873 に答える