Question

大家好。

我再次需要你的建议（我等一天，我可以说我可以自己解决我的编程问题）。我需要用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进行比较但是我得到了一些垃圾。有人可以帮助我吗？

-------编辑-------- @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的方法似乎更好。

Answer 1

尝试以下

  $('#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/

注意：单击按钮时我也会重置分数。

在一个div中按类选择所有元素

1 个答案: