0

それぞれの下に画像がある4〜5個のラジオボタンがあります。ボタンがチェックされているので、画像を別の画像に変更したいと思います。そうでなければ、選択されているものを確認してからその画像の上に画像を配置する場合は4で実行できますが、すべてのラジオボタンの同じ画像として数行で実行したいと思います。私はこれを始めました：

CSS

#selectedRadio {
        display:none;
        width:74px;
        height:69px;
        position:absolute;
        margin-top:20px;
}

Jクエリ

<script>
jQuery(function(){
        jQuery("input[name=choose]").change(function(){          
            if ($(this).is(":checked")) {
                jQuery("#selectedRadio").slideDown()
            }                                                       
       });
});
</script>

HTML

<div id="selectedRadio"><img src="selected.png" /></div>
<input name="choose"  value="black"> <br><img src ="black.jpg" />
<input name="choose"  value="white"> <br><img src ="white.jpg" />
<input name="choose"  value="red"> <br><img src ="red.jpg" />
<input name="choose"  value="blue"> <br><img src ="blue.jpg" />
4

2 に答える 2

1

これを行う 1 つの方法を示すフィドルを作成しました。

HTMLは次のとおりです。

<div class="container">
    <label>
        <input type="radio" name="choose" value="black"/>
        <img src="black.jpg" alt="black image" data-color="black" />
    </label>
    <label>
        <input type="radio" name="choose" value="white"/>
        <img src="white.jpg" alt="white image" data-color="white" />
    </label>
    <label>
        <input type="radio" name="choose" value="red"/>
        <img src="red.jpg" alt="red image" data-color="red" />
    </label>
    <label>
        <input type="radio" name="choose" value="blue"/>
        <img src="blue.jpg" alt="blue image" data-color="blue" />
    </label>
</div>

JS は次のとおりです。

$(function () {
    $('label').click(function () {
        var that = this,
            images = $(this).closest('div.container').find('img');
        images.each(function () {
            var t = $(this);
            if (t.data('color') === $(that).find('input').val()) {
                t.attr({
                    src: 'selected.png',
                    alt: 'selected image'
                });
            } else {
                t.attr({
                    src: t.data('color') + '.jpg',
                    alt: t.data('color') + ' image'
                });
            }
        });
    });
});

そしていくつかの基本的なスタイリング：

label {
    display: inline-block;
    width:150px;
}
input,
img {
    display: block;
}

繰り返しますが、これは概念を理解するための 1 つの可能な方法です。

于 2013-04-23T15:45:03.140 に答える
-1

多分 hide() / show() メソッドを使用しますか? http://www.w3schools.com/jquery/jquery_hide_show.asp

于 2013-04-23T15:10:43.893 に答える