2

これは私のjqueryコードです

$(document).ready(function() {
$("div.imgDisp").hide();
$('[id="' + $(":radio:checked").val()+'"]').show();
    $('input[name="rdNumber"]:radio').click(function() {
     $("div.imgDisp").fadeOut('slow');
    $('[id="' + $(this).val()+'"]').fadeIn('slow');
});
});

これはhtmlコードです

<div class="wrapper"> <strong><span>*</span> Number</strong>

<div class="formText">
    <input type="radio" name="rdNumber" value="100" />100
    <input type="radio" name="rdNumber" value="200" checked="checked"/>200
    <input type="radio" name="rdNumber" value="300" />300</div>
</div>

<input type="radio" name="rdImage" value="preExisting" />Choose from images below
<div id="100" class="imgDisp">
<div class="heading">10x10</div>
<input type="radio" name="preExistingImage" id="100" value="10x10-1"
/>
<img src="1-1.png">
<input type="radio" name="preExistingImage" id="100" value="10x10-2" />
<img src="1-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">10x20</div>
<input type="radio" name="preExistingImage" id="200" value="10x20-1"
/>
<img src="2-1.png">
<input type="radio" name="preExistingImage" id="200" value="10x20-2" />
<img src="2-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">20x10</div>
<input type="radio" name="preExistingImage" id="200" value="20x10-1"
/>
<img src="3-1.png">
<input type="radio" name="preExistingImage" id="200" value="20x10-2" />
<img src="3-2.png" width="20" height="10">
</div>

コードは、id = 100のdivを表示している100ラジオボタンを選択すると正常に機能し、id = 200を選択すると、id=200の2つのdivが表示されます。ここでこのフィドルを確認してくださいhttp://jsfiddle.net/vDBDA/2/

現在、2つのクエリがあります。1。重複するIDを使用して、このコードのようなラジオボタンの選択で同様のタイプのdivを表示します

<div id="200" class="imgDisp">

正常に動作していますが、IDの重複が問題であることはわかっています。どうすれば修正できますか？

  1. ページが読み込まれると、デフォルトで番号200がチェックされます。このフィドルでは、ラジオボタン200に関連付けられたdivが表示されますが、実際のプログラミングとlocalhost/ブラウザでは表示されません。理由は何でしょうか。

あなたの助けはすべて黄金になります。よろしくお願いします

4

6 に答える 6

1

ID要素のグループにいくつかの効果を適用し、それらすべての要素を 1 つのクラスに含める場合は、一意にする必要があります。効果を適用するには、使用して指定する必要があります $('.classname').fadein();

私はあなたの厄介なplsチェック http://jsfiddle.net/vDBDA/7/を少し編集しました

于 2013-03-05T09:13:01.157 に答える
0

DOMを追加classおよび削除してから、動的にロードされたコンテンツにイベントをバインドできるjQueryメソッドを使用するだけです。ID.on()

于 2013-03-05T09:03:27.787 に答える
0

グループ化ごとに必要な各要素にクラスを割り当てることができます。each 関数を使用して、これらの要素を反復処理する必要がある場合があります。

$(selector).each( function(){
     //hide or show...etc
});
于 2013-03-05T09:12:12.193 に答える
0

このクラスをcssファイルに追加するだけです

.hide_div{
    display: none;
}

任意の div を非表示にしているときに、このプロパティを div に適用し、div を表示する場合は、ユーザー show_div をクラスとして使用します。その DIV に CSS を適用するには、addClass を使用します。

.show_div{
    display: block;
}
于 2013-03-05T09:12:29.623 に答える
0 
    i try your code...and here is what i did...

    <div class="wrapper"> <strong><span>*</span> Number</strong>

        <div class="formText">
            <input type="radio" name="rdNumber" value="100" />100
            <input type="radio" name="rdNumber" value="200" checked="checked" />200
            <input type="radio" name="rdNumber" value="300" />300</div>
    </div>
    <input type="radio" name="rdImage" value="preExisting" />Choose from images below
    <div class="100 imgDisp" >
        <div class="heading">10x10</div>
        <input type="radio" name="preExistingImage" class="100" value="10x10-1"
        />
        <img src="1-1.png">
        <input type="radio" name="preExistingImage" class="100" value="10x10-2" />
        <img src="1-2.png">
    </div>
    <div class="200 imgDisp">
        <div class="heading">10x20</div>
        <input type="radio" name="preExistingImage" class="200" value="10x20-1"
        />
        <img src="2-1.png">
        <input type="radio" name="preExistingImage" class="200" value="10x20-2" />
        <img src="2-2.png">
    </div>
    <div class="200 imgDisp" >
        <div class="heading">20x10</div>
        <input type="radio" name="preExistingImage" class="200" value="20x10-1"
        />
        <img src="3-1.png">
        <input type="radio" name="preExistingImage" class="200" value="20x10-2" />
        <img src="3-2.png" width="20" height="10">
    </div>

$(document).ready(function () {
    $(".imgDisp").hide();
    $('.'+$(":radio:checked").val()).show();
    $('input[name="rdNumber"]:radio').click(function () {
        $("div.imgDisp").fadeOut('slow');
        $('.'+$(this).val()).fadeIn('slow');
    });
});
于 2013-03-05T09:27:31.010 に答える
0

ID は 1 つの HTML ページで一意でなければならないため、ID の代わりにクラスを使用できます。

于 2013-03-05T09:06:42.097 に答える