-1

英語/タイ語の Web サイトで多肢選択式テストを受けました。各行には質問と 4 つの回答の選択肢があり、レイアウトは基本的に 50X5 のマトリックスです。

    <div id="question">
        <p class="word_test">1<span class="1 color_up audio" id="b1e01">the </span></p>
        ...
        <p class="word_test">50<span class="50 color_up audio" id="b1e50">if </span></p>
    </div>
    <div id="answers">
        <div id="col_a">
            <p class="word_test">A:<span class="1 color_up audio" id="b1t01">คำนำหน้านาม&lt;/span></p>
                ...
            <p class="word_test">A:<span class="50 color_up incorrect">มัน </span></p>
        </div>
        <div id="col_b">
          ...
         </div>
        <div id="col_c">
          ...
        </div>
        <div id="col_d">
            <p class="word_test">D:<span class="1 color_up incorrect">เลอะ </span></p>
                ...
            <p class="word_test">D:<span class="50 color_up incorrect">เป็น อยู่ คือ </span>    </p>
        </div>
    </div>

ユーザーが A、B、C、または D のいずれかの選択肢をクリックすると、その行の質問項目が緑 (正解) または赤 (不正解) に変わります。私の問題は、クリックしたターゲット (A、B、C、または D) を任意の行で requicolor の変更にリンクする方法です。addClass と removeClass が色の変更を処理することはわかりますが、クリックされた回答と質問項目を関連付ける方法がわかりません。対応する質問を参照できるように、各列の行に番号を付けましたが、それが必要かどうかはわかりません。助けてくれてありがとう。

4

2 に答える 2

1

見る.click()

$("#other").click(function() {
  $("#target").css("background", "red");
});
于 2013-08-26T07:03:56.973 に答える
0

HTMLとCSS

今回はラジオ ボタンがトリガーされるとすぐにスクリプトが回答をチェックするため、アンカーをクリックする必要はないと思います。

<style type="text/css">
    .hide { display:none; }
</style>

<div class="questions">
    <p>Q1</p>
    <label><input type="radio" name="q1" value="a" />Q1 A</label>
    <label><input type="radio" name="q1" value="b" />Q1 B</label>
    <label><input type="radio" name="q1" value="c" />Q1 C</label>
</div>

<div class="questions hide">
    <p>Q2</p>
    <label><input type="radio" name="q2" value="a" />Q2 A</label>
    <label><input type="radio" name="q2" value="b" />Q2 B</label>
    <label><input type="radio" name="q2" value="c" />Q2 C</label>
</div>

<div class="questions hide">
    <p>Q3</p>
    <label><input type="radio" name="q3" value="a" />Q3 A</label>
    <label><input type="radio" name="q3" value="b" />Q3 B</label>
    <label><input type="radio" name="q3" value="c" />Q3 C</label>
</div>

jQueryを使ったJavascript

var answers = {q1: 'a', q2: 'b', q3: 'a'};
/* True Answers: ↑ "a" ,  ↑ "b"  ,  ↑ "a" */
$('input:radio').click(function() {
    var container = $(this).parents('div');
    var question = $(this).attr('name');
    var answer = $(this).val();

    alert(answers[question] == answer);

    container.addClass('hide');
    container.next().removeClass('hide');
});

必要に応じてスクリプトを変更するだけです。今回があなたにとって正しいことを願っています。=))

于 2013-08-26T07:08:22.780 に答える