Question

我有一个小问题。我尝试构建这个简单的测验。现在它看起来像这样：

<?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中所有p元素的div.pytanie。我知道我可以使用id选择器，但是有必要吗？也许还有另一个选项可以将每个循环修剪为一个div？

Answer 1

尝试

$(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() {

    });

});

演示：Fiddle

Answer 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');

Answer 3

是的，可以使用parent（）选择器。

$('.odpowiedz').click(function() {
   $(this).parent(); // <div class="pytanie">
   $(this).parent().css('background-color','yellow');
});

Answer 4

此fiddle会将当前div中点击的.odpowiedz设置为蓝色背景。

$('.odpowiedz').click(function () {
    // Najpierw odznacz zaznaczone odpowiedzi
    $(this).parent().find(".odpowiedz").css('background-color', 'white');
    // Zaznacz tę odpowiedź
    $(this).css('background-color', 'blue');
});

jQuery给定div中的每个元素与类

4 个答案: