Question

在用户对命令进行排序并单击以检查结果之后，我使用以下函数从ul检索句子。我的问题是该脚本会找到所有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

尝试一下

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>

Answer 2

由于您已经使用过代码，因此我简化了代码并转换为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>

jQuery函数检索所有元素，而不是特定元素

2 个答案: