1

ウェブサイトのページ内でクイズを作成しようとしています。次へを押すたびに、ページ内に新しい質問が表示されるようにすることを目的としています。ただし、スクリプトを 2 回呼び出しても機能しません。

これを実現するために、まず「next」というリンクを作成しました。

<a href="addquiz.html" name="next" id="1">Next</a>

これは、addquiz.html から q1 を開くスクリプトを呼び出します。

<script>
$("#1").click(function() {
$("#load").load("addquiz.html" + ' #q1');
event.preventDefault();
});
</script>

このスクリプトには、関数 goupone を呼び出す送信ボタンがあり、リンクの ID を 1 増やします (例: 1 から 2 に)。

<div id="q1">
<h3>5 + 19 = ?</h3>
    <input type="text" width="6" name="" id="question-1-answers" value="" />
    <input type="submit" value="Check" onClick="goupone();" />
</div>

<script>
function goupone(){
var v=document.links[9].id;
vi=parseInt(v);
vi=vi+1;
document.links[9].id=vi;
}
</script>

ただし、次のボタンをもう一度クリックしても何も起こりません。誰でも助けることができますか？

4

1 に答える 1

1

idfrom1をからに変更したため、アンカーをクリックしたときに2最初のクリックハンドラー$("#1").click()がトリガーされなくなりました。a別の方法は、イベントハンドラーを次の属性を持つにバインドすることnameですnext。

<script>
$('a[name="next"]').click(function() {
  $("#load").load("addquiz.html" + ' #q1');
  event.preventDefault();
});
</script>

または、クラスを作成し、たとえばnext、に追加してa、セレクターとして使用します。

<a href="addquiz.html" name="next" id="1" class="next">Next</a>

<script>
$('a.next').click(function() {
  $("#load").load("addquiz.html" + ' #q1');
  event.preventDefault();
});
</script>

ただし、代わりに以下を使用するようにコード全体をリファクタリングします。

<a href="addquiz.html" name="next" id="nextAnchor" data-next-id="1">Next</a>

<script>
$("#nextAnchor").on('click', function() {
  $("#load").load("addquiz.html#q" + $(this).data("next-id"));
  event.preventDefault();
});
</script>

function goupone() {
  var $next = $("#nextAnchor");
  var currentId = parseInt($next.data("next-id"));
  var nextId = currentId + 1;
  $next.data("next-id", nextId);
}

これが動作するデモです。

于 2012-08-26T02:38:31.967 に答える