2013-05-23 2 views
0

Привет всем хорошим людям.Выбрать все элементы по классам в одном 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 кажется лучшим.

+0

Я не видел '.luka-odpowiedz' в тебе скрипку ... у тебя нет элементов – bipen

ответ

2

Попробуйте следующее

$('#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 
     var fill = $('.luka-odpowiedz').text(); // save span text on click 

     $('.luka-prawidlowa').each(function() { 
      // for each paragraph 
      //your mistake here was to use for each span instead of paragraph 

      if (fill === $(this).text()) { // if span text is like paragraph 
       alert('ok'); // do something 
      } 
     }); 
    }); 

FIDDLE



Новый сценарий (я не видел, что вы используете один и тот же класс везде).

Предлагаю добавить еще один класс в .pytanie (в моем примере .gap-fill). Нет необходимости добавлять новый класс, но это лучше для производительности. (Каждый не придется просматривать все DIV, который не пробел заполнения вопрос)

$('.gap-fill').each(function() { 
     var th = $(this); 
     var text = th.find('.luka-odpowiedz').text(); 

     th.find('.luka-prawidlowa').each(function(){ 
      if(text === $(this).text()){ score++; } 
     }); 
}); 

http://jsfiddle.net/k8KC7/9/

ПРИМЕЧАНИЕ: Я также сброшена счет при нажатии на кнопку.

+0

Работает как шарм! – Glorifind

+0

Еще раз спасибо за помощь, но ваше решение имеет небольшой сбой. Когда я добавляю еще один вопрос, скрипт dosnt работает правильно. Когда я правильно заполняю оба пробела, он подсчитывает мне 0 очков - если я заполняю только один пробел, он подсчитывает точку :(Любая идея? – Glorifind

+0

Я думаю, проблема в том, что вы используете '.luka-odpowiedz' для своего класса' span' и ' .luka-prawidlowa' для вашего класса ответов. ** Каждый вопрос должен иметь свои собственные классы **. Теперь функция, вероятно, проверяет неправильный интервал с неправильным ответом. Можете ли вы показать новую скрипту своими новыми вопросами? – Spokey

Смежные вопросы