Функция jquery извлекает все элементы, а не конкретный элемент

Question

Я использую следующую функцию, чтобы получить предложение из ul после того, как пользователь отсортировал заказ и щелкнул, чтобы проверить результат.Моя проблема в том, что скрипт находит предложения, содержащиеся во всех ссылках, а не только в выбранных.

    const answer = {
                Q1: "I can't play piano",
                Q2: "The moon is a green balloon"                    
                };
const QNo = 2; 

function checkOrd() {
        // finds all instances of ul id: need to find one at a time and check only question clicked

        $('#quiz').find('ul').each(function() {
            let sentenceId = $(this).attr('id');
            //sentenceId is a str variable therefore must be applied as '#' + sentenceId to correctly function as id
            sentence = $.map($('#' + sentenceId + ' li'), function(element) {return $(element).text()}).join(' ');

            if (sentence == answer[sentenceId]) {
            alert('OK!') // message must be in quotes
                } else {
            alert('nope!')
            }

        });

    };

HTML:

    <div id = "quiz">
<ul class= "scramble" id = "Q1">
<li>I</li>
<li>piano</li>
<li>can't</li>
<li>play</li>
<button onclick ="checkOrd();">Check</button>
</ul>


<ul class="scramble" id = "Q2" >
<li>moon</li>
<li>green</li>
<li>is</li>
<li>balloon</li>
<li>a</li>
<li>The</li>
<button onclick ="checkOrd();">Check</button>
</ul>

</div>

Я пробовал цикл, но все этоделает это повторить функцию.Есть ли способ связать каждую кнопку уникально с соседней парой вопрос / ответ?Мне кажется, что проблема в sentence = $.map($('#' + sentenceId + ' li'), function(element) {return $(element).text()}).join(' ');, который извлекает все UL из-за того, как он написан.У меня нет знаний, чтобы изменить это соответствующим образом.Я даже не уверен, что задал вопрос разборчиво!

Answer 1

Я упростил ваш код и преобразовал его в jQuery, поскольку вы уже использовали его.

const answer = {
                Q1: "I can't play piano",
                Q2: "The moon is a green balloon"                    
                };
const QNo = 2; 

$(document).ready(function(){
    $(document).on("click",".btn-click",function(){
        let sentenceId = $(this).closest("ul").attr('id');
        let sentence = $.map($(this).closest("ul").find("li"), function(element) {return $(element).text()}).join(' ');
        alert(sentence + "\n" + answer[sentenceId]);
        if (sentence == answer[sentenceId]) {
            alert('OK!') // message must be in quotes
                } else {
            alert('nope!')
            }
});


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "quiz">
<ul class= "scramble" id = "Q1">
<li>I</li>
<li>piano</li>
<li>can't</li>
<li>play</li>
<button type="button" class ="btn-click">Check</button>
</ul>


<ul class="scramble" id = "Q2" >
<li>moon</li>
<li>green</li>
<li>is</li>
<li>balloon</li>
<li>a</li>
<li>The</li>
<button type="button" class ="btn-click">Check</button>
</ul>

</div>

Answer 2

Попробуйте это

var string='';
$('#Q1 > li, #Q2 > li').click(function(){
string+=$(this).text()+" ";
})

const answer = {
                Q1: "I can't play piano",
                Q2: "The moon is a green balloon"                    
                };
const QNo = 2; 

function checkOrd() {
  if(string.split(" ").join('')==answer.Q1.split(" ").join('') || string.split(" ").join('')==answer.Q2.split(" ").join(''))
  {alert("Yes");string=''}
  else
  {
  alert("No");string=''}
    };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "quiz">
<ul class= "scramble" id = "Q1">
<li>I</li>
<li>piano</li>
<li>can't</li>
<li>play</li>
<button onclick ="checkOrd();">Check</button>
</ul>


<ul class="scramble" id = "Q2" >
<li>moon</li>
<li>green</li>
<li>is</li>
<li>balloon</li>
<li>a</li>
<li>The</li>
<button onclick ="checkOrd();">Check</button>
</ul>

</div>