Question

如何检查被点击的元素是否等于数组中的对象？这是我的代码：

＆＃13;

// Question app where you must choose between two different answers. The problem is next: I don't know how to check if the clicked div is equal to the object from the array.
$(document).ready(function() {
  var $answer_1 = $(".a_1_h2"); //store the <h2> for the answer 1
  var $answer_2 = $(".a_2_h2"); //store the <h2> for the answer 2
  var $question = $(".question_h2"); //store the <h2> for the question
  var $counter = 0;
  var $score = $("<h2 class='score'></h2>");
  var content_list = [{
    "answer_1_val": "Yes",
    "answer_2_val": "No",
    "question_val": "Question_1?",
    "correct_val": "Yes"
  }, {
    "answer_1_val": "No",
    "answer_2_val": "Yes",
    "question_val": "Question_2?",
    "correct_val": "No"
  }]; //answers(2), question 

  $(".main_div").append($score);
  $score.text($counter);
  $(".a_1").append($answer_1); // append variable to div
  $(".a_2").append($answer_2); // append variable to div

  $(".start_button").click(function() {
    window.location.href = 'index.html'; //redirect to another page
  });

  $answer_1.html(content_list[0].answer_1_val); //attach answer_1_val to the <h2> variable
  $answer_2.html(content_list[0].answer_2_val); //attach answer_2_val to the <h2> variable
  $question.html(content_list[0].question_val); //attach question_val to the <h2> variable

  if ($(".a_1").click().is($answer_1)) {
    $score.text($counter += 10);
  } else {
    $score.text($counter -= 10);
  } // check if the clicked element is equal with the value from the object
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>

<section>
  <div class="main_div">
    <div class="overall_div">
      <div class="answers_div">
        <div class="a_1">
          <h2 class="a_1_h2"></h2>
          <!--placeholder for answer_1-->
        </div>
        <div class="vs">
          <h2>VS</h2>
        </div>
        <div class="a_2">
          <h2 class="a_2_h2"></h2>
          <!--placeholder for answer_2-->
        </div>
      </div>
      <div class="questions_div">
        <h2 class="question_h2"></h2>
        <!--placeholder for question-->
      </div
    </div>
  </div>
</section>

＆＃13;

有什么建议吗？

Answer 1

希望这会对你有所帮助

＆＃13;

// Question app where you must choose between two different answers. The problem is next: I don't know how to check if the clicked div is equal to the object from the array.
$(document).ready(function() {
  var $answer_1 = $(".a_1_h2"); //store the <h2> for the answer 1
  var $answer_2 = $(".a_2_h2"); //store the <h2> for the answer 2
  var $question = $(".question_h2"); //store the <h2> for the question
  var $counter = 0;
  var $score = $("<h2 class='score'></h2>");
  var content_list = [{
    "answer_1_val": "Yes",
    "answer_2_val": "No",
    "question_val": "Question_1?",
    "correct_val": "Yes"
  }, {
    "answer_1_val": "No",
    "answer_2_val": "Yes",
    "question_val": "Question_2?",
    "correct_val": "No"
  }]; //answers(2), question 

  $(".main_div").append($score);
  $score.text($counter);
  $(".a_1").append($answer_1); // append variable to div
  $(".a_2").append($answer_2); // append variable to div
  
  $(".start_button").click(function() {
    window.location.href = 'index.html'; //redirect to another page
  });

  $answer_1.html(content_list[0].answer_1_val); //attach answer_1_val to the <h2> variable
  $answer_2.html(content_list[0].answer_2_val); //attach answer_2_val to the <h2> variable
  $question.html(content_list[0].question_val); //attach question_val to the <h2> variable
  $("#a1").val(content_list[0].answer_1_val); // assign value to radio button
  $("#a2").val(content_list[0].answer_2_val);// assign value to radio button
  
  $("input[name='ans']").change(function(){ // check on click which button has been clicked
    if($("input[name='ans']:checked").val() == content_list[0].correct_val){ //compare clicked value with correct value
      $score.text($counter += 10);
    } else {
      $score.text($counter -= 10);
    }
  })  // check if the clicked element is equal with the value from the object
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>

<section>
  <div class="main_div">
    <div class="overall_div">
      <div class="answers_div">
        <div class="a_1">
          <input type="radio" id="a1" name="ans"><label class="a_1_h2"></label>
          <!--I dont know where you are clicking so i have created radio button-->
        </div>
        <div class="vs">
          <h2>VS</h2>
        </div>
        <div class="a_2">
          <input type="radio" id="a1" name="ans"><label class="a_2_h2"></label>
          <!--I dont know where you are clicking so i have created radio button-->
        </div>
      </div>
      <div class="questions_div">
        <h2 class="question_h2"></h2>
        <!--placeholder for question-->
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 2

您正在比较不同等级位置的元素。变化

if ($(".a_1").click().is($answer_1)) {

到

if ($(".a_1_h2").click().is($answer_1)) {

你会得到正确的结果。

但是，除此之外，我不认为比较元素是一个很好的实现。最好直接比较答案值。

如何检查被点击的元素是否等于数组中的对象？

2 个答案: