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>

我的问题很明显 - 当我单击任何问题时，它会更改all 中background-color的所有p元素div.pytanie。我知道我可以使用id选择器，但有必要吗？也许还有另一种选择可以将每个循环仅修剪为一个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

这个小提琴会将.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 回答
1

是的，使用 parent() 选择器是可能的。

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