2

少し質問があります。この簡単なクイズを作成してみます。現在、次のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style/style.css" />
        <script src="js/jquery-1.9.1.min.js"></script>
        <title></title>
    </head>
    <body>
        <div class="pytanie">
        <p class="tresc">1. Ile księżyców ma ziemia?</p>
        <p class="odpowiedz">A) 1</p>
        <p class="odpowiedz">A) 2</p>
        <span class="btn-sprawdz" id="btn-sprawdz-1">Sprawdź</span> 
        </div>
        <div class="pytanie">
        <p class="tresc">1. Ile księżyców ma ziemia?</p>
        <p class="odpowiedz">A) 1</p>
        <p class="odpowiedz">A) 2</p>
        <span class="btn-sprawdz" id="btn-sprawdz-1">Sprawdź</span> 
        </div>
        <script>
        $(document).ready(function() {
            var score;
            score=0;
            // Mechanizm zaznaczania odpowiedzi
            $('.odpowiedz').click(function() {
                // Najpierw odznacz zaznaczone odpowiedzi
                $('div.pytanie p').each(function(){
                    $(this).css('background-color','white');
                });
                // Zaznacz tę odpowiedź
                $(this).css('background-color','blue');
                });
                //Mechanizm sprawdzania
                $('#btn-sprawdz-1').click(function() {
            });
        });
        </script>
    </body>
</html>

私の問題は明らかです。質問をクリックするとbackground-color、 all のすべてのp要素が変更されますdiv.pytanie。セレクターを使用できることはわかっていますidが、必要ですか? たぶん、各ループを1つだけにトリムする別のオプションがありますdivか?

4

4 に答える 4

2

試す

$(document).ready(function() {
    var score;
    score=0;
    // Mechanizm zaznaczania odpowiedzi
    $('.odpowiedz').click(function() {
        // Najpierw odznacz zaznaczone odpowiedzi
        $(this).closest('.pytanie').find('p.odpowiedz').css('background-color','white');
        // Zaznacz tę odpowiedź
        $(this).css('background-color','blue');
    });
    //Mechanizm sprawdzania
    $('#btn-sprawdz-1').click(function() {

    });

});

デモ:フィドル

于 2013-05-20T12:17:46.730 に答える
2

Working FIDDLE Demo

.odpowiedz現在の質問ですべてを取得する必要があります。これは、あなたに移動してから.pytanie すべてを選択するため.odpowiedzです。

$(this)
    // go up the dom to the current question
    .closest('.pytanie')

    // and now find all possible answers
    .find('.odpowiedz')

        // and make them white
        .css('background-color', 'white');
于 2013-05-20T12:30:03.530 に答える
1

はい、parent() セレクターで可能です。

$('.odpowiedz').click(function() {
   $(this).parent(); // <div class="pytanie">
   $(this).parent().css('background-color','yellow');
});
于 2013-05-20T12:09:36.737 に答える
1

このフィドル.odpowiedzは、現在の div でクリックされたものを青色の背景に設定します。

$('.odpowiedz').click(function () {
    // Najpierw odznacz zaznaczone odpowiedzi
    $(this).parent().find(".odpowiedz").css('background-color', 'white');
    // Zaznacz tę odpowiedź
    $(this).css('background-color', 'blue');
});
于 2013-05-20T12:14:33.157 に答える