1

ラジオ画像からフォームの次のボタンへのリンクが生成されるようにする方法を知る必要があります。3 つの質問すべてまたは各質問のラジオ ボタンをオンにすると、リンクが生成され、ボタンがクリック可能になる元のコードがあります。画像を追加しましたが、クリック可能ですが、クリックできるように次のボタンへのリンクが生成されています。私はjavascriptが初めてなので、詳細な例を使用してください。

画像ラジオ ボタンを含むコードは次のとおりです: http://jsfiddle.net/P74tn/1/

ドキュメントの HTML:

<form name="quiz" id='quiz'>

<h4>What carrier do you have?</h4>
<div class="radio" id="form">
  <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="AT&T"><img 
width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Other">  
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" />
</div>
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Unlocked">   
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" />  
</div>
</div>

<br /><br /><br />

<h4>What is your phones capicity?</h4>
<div class="radio" id="form">
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2" 
value="8GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2"  
value="16GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
</div>

<br /><br /><br />

<h4>What color is your phone?</h4>
<div class="radio" id="form">
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3"   
value="Black"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3"   
value="White"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
</div>



<br>
<div id=linkDiv>
 <input type=button disabled=disabled value=Next>
</div>
</form>
4

1 に答える 1

1

JS フィドルには多くのエラーがあります。できるだけ多くのエラーをリストしてみます。

  • ID は一意である必要があります。ここでは、複数の div が同じ ID「フォーム」を持っています。id="form_carrier"、などのように名前を変更する必要がありますid="form_color"。

  • jQuery とバニラ JS の奇妙な組み合わせを使用しています。jQuery ハンドラ形式 (つまり$('.radio div').on('click', function() {});) またはインライン JS (つまりonclick="tryToMakeLink();") を使用します。インライン JS の場合、JS コードを引用符で囲む必要があることに注意してください。

  • 選択の結果を取得するセレクターは<input>要素を取得しようとしますが、HTML コードでは<div>;を使用しています。コーディングされているため、セレクターは何も選択しません。

  • :checkedセレクターは要素に対してのみ機能します<input>。<div>要素を使用しているため、使用できません。ここでは、選択した任意の div に class active を設定しているため、クラス セレクターを使用できます。

最終的なセレクターは次のようになります。var q1=$('div[name="q1"].active');

  • セレクターがどの要素とも一致しない場合、null は返されず、空の配列が返されます。null にdocument.querySelector('input[name="q3"]:checked')なることはありません。チェックを次のものに置き換える必要があります。q1.length === 0

  • q1.valuevalue はノードの属性であるため、は使用できません。jQuery関数を使用できますq1 = q1.attr('value')

  • div の innerHTML を変更するのではなく、単純に入力要素を更新する必要があります

元のフィドルのフォークを作成して、それを機能させる方法を示しました：http://jsfiddle.net/rCXT5/1/

于 2013-08-25T21:48:31.527 に答える