Привет всем хорошим людям.Выбрать все элементы по классам в одном div
Мне нужен ваш совет еще раз (я жду дня, когда могу сказать, что могу самостоятельно решить свои проблемы с программированием). Мне нужно написать простую викторину с помощью JavaScript или jQuery. Я делал простые вопросы, такие как ABCD, но все же я не могу ответить на вопрос о заполнении пробелов. Вот мой код:
<?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" />
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<link type="text/css" href="../css/nexto.css" rel="stylesheet" />
</head>
<body>
<div class="pytanie">
<p class="tresc">1. Ile ksiezyców ma ziemia?</p>
<p class="odpowiedz poprawna">A) 1</p>
<p class="odpowiedz">A) 2</p>
</div>
<div class="pytanie">
<p class="tresc">1. Ile ksiezyców ma ziemia?</p>
<p class="odpowiedz poprawna">A) 1</p>
<p class="odpowiedz">A) 2</p>
</div>
<div class="pytanie">
<p class="tresc">Excuse me, how <span contenteditable="true" class="luka-odpowiedz"></span> I get to the nearest underground station?</p>
<p class="luka-prawidlowa">can </p>
</div>
<span class="btn-sprawdz" id="btn-sprawdz-1">Sprawdz</span>
<script>
$(document).ready(function() {
var score;
score=0;
// Mechanizm zaznaczania odpowiedzi wielokrotnego wyboru
$('.odpowiedz').click(function() {
// Najpierw zdejmij kolor
$(this).closest('.pytanie').find('p').css('background-color','transparent');
// Zdejmij selecta
$(this).closest('.pytanie').find('p').removeClass('selected');
// Zaznacz tę odpowiedź
$(this).css('background-color','blue');
// Oznacz ją jako zaznaczoną
$(this).addClass('selected');
});
////////////////////////////////////////////////////////////
//Mechanizm sprawdzania odpowiedzi wielokrotnego wyboru
$('#btn-sprawdz-1').click(function() {
// Iteruje po odpowiedziach i pobieram class
$('.odpowiedz').each(function() {
var wartosc_odpowiedzi = $(this).attr('class');
// Jeśli selected i poprawna + punkt
if (wartosc_odpowiedzi == "odpowiedz poprawna selected") {
score++;
}
});
////////////////////////////////////////////////////////////
// Mechanizm sprawdzania luk
$('.luka-odpowiedz').each(function() {
// Pobieramy odpowiedź użytkownika
var wartosc_odpowiedzi = $(this).text();
var wzorzec_odpowiedzi = $(this).closest('.luka-prawidlowa').text;
alert(wzorzec_odpowiedzi);
});
});
});
</script>
</body>
</html>
здесь JSFIDDLE проект.
Gap может иметь несколько ответов (все остряки класса .luka-prawidlowa
я попытался взять все paragraps в цикле, и сравнить пользовательский ответ на .luka-prawidlowa
Но я получить мусор вместо этого. Кто-нибудь может мне помочь?
----- - EDIT -------- Ответ @Spokey прекрасно работает - в то же время я сделать это другим способом разностное был в .each
петле, прежде чем он был
$('.luka-odpowiedz').each(function() {
// Pobieramy odpowiedź użytkownika
var wartosc_odpowiedzi = $(this).text();
var wzorzec_odpowiedzi = $(this).closest('.luka-prawidlowa').text;
alert(wzorzec_odpowiedzi);
});
, но я иду один шаг до.. .pytanie
и сделать это как:
$('.pytanie-luka').each(function() {
// Pobieramy odpowiedź użytkownika
var wartosc_odpowiedzi = $(this).find('.luka-odpowiedz').text();
var wzorzec_odpowiedzi = $(this).find('.luka-prawidlowa').text();
});
Я должен изменить .pytanie
на .pytanie-luka
для цикла итерации только с заполнением пробелов вопросов. Но все же подход @Spokey кажется лучшим.
Я не видел '.luka-odpowiedz' в тебе скрипку ... у тебя нет элементов – bipen