Question

我试图制作一个真假游戏，并需要帮助编写函数来验证用户是对还是错。我的DOM结构如下：

<ul class="multiplechoice_answergroup">
  <li class="multiplechoice_answer True">
    <input class="checkbox" type="checkbox" name="checkme">
    <p>This answer is true</p>
  </li>

  <li class="multiplechoice_answer False">
    <input class="checkbox" type="checkbox" name="checkme">
    <p>This answer is false</p>
  </li>
</ul>

这是我尝试的jquery，但我一直认为答案是正确的：

truefalseSubmit = function() {
    if($('.multiplechoice_answergroup').children('li').hasClass('False') && $('.multiplechoice_answergroup').children('li').find('input[type="checkbox"]:not(:checked)')){
      correctAnswer();
    } else if($('.multiplechoice_answergroup').children('li').hasClass('True') && $('.multiplechoice_answergroup').children('li').find('input[type="checkbox"]:checked')){
        correctAnswer();
    } else {
      incorrectAnswer();
    }

  };

Answer 1

而不是

$('.multiplechoice_answergroup').children('li')
   .find('input[type="checkbox"]:checked')

你应该做

$('.multiplechoice_answergroup').children('li')
   .find('input[type="checkbox"]').is(":checked")

原因：

find()返回一个jQuery对象，该对象在JavaScript中验证为true。所以第一个或第二个if表达式总是为真，&&之后的部分始终为真。

当然也在这里：

$('.multiplechoice_answergroup').children('li').find('input[type="checkbox"]').is(":not(:checked)")

Answer 2

怎么样：

truefalseSubmit = function() {
    $('.multiplechoice_answer input[type="checkbox"]').click(function() {
        /**
         * Check if the parent div where checkbox is, has the class "true"
         */

            if($(this).parent().hasClass('true'))
                return correctAnswer();

        /**
         * Answer is incorrect
         */

            return incorrectAnswer();
    });
}

Answer 3

我认为它应该是这样的：

truefalseSubmit = function() {
  var $trueCheckbox = $('.multiplechoice_answergroup li.True input[type="checkbox"]');
  var $falseCheckbox = $('.multiplechoice_answergroup li.False input[type="checkbox"]');
  if ($trueCheckbox.is(':checked') && $falseCheckbox.is(':not(:checked)')) {
    correctAnswer();
  } else {
    incorrectAnswer();
  }
};

Answer 4

为什么不喜欢这样？

HTML：

<ul>
  <li class="answer-button true">
    <p>This answer is true</p>
  </li>

  <li class="answer-button false">
    <p>This answer is false</p>
  </li>
</ul>

JS：

var answerHandler = function (answer) {
    // do something
};
$('.answer-button').click(function () {
    answerHandler($(this).hasClass('true'));
});

使用jquery进行真或假验证

4 个答案: