クリックされた要素が配列のオブジェクトと等しいかどうかをチェックする方法は？

Question

クリックした要素が配列のオブジェクトと等しいかどうかをチェックする方法はありますか？ここ は私のコードです：

// 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 
 
});

<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>

任意の提案ですか？

Answer 1

異なる階層位置の要素を比較しています。

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

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

に変更し、あなたが正しい結果を得ることができます。

しかし、それ以外にも、要素を比較することがこれに適しているとは思いません。答え値を直接比較する方が良いでしょう。

Answer 2

希望これがお手伝いします

// 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 
 
});

<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>