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

问题描述 投票:0回答:2

我用下面的功能的用户排序顺序,点击查询后的结果来检索UL的句子。我的问题是,脚本发现包含在所有ULS,只有不是特定的一个点击的句子。

    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(' ');它检索的,因为它是书面的方式,所有ULS。我没有知识适当地改变它。我甚至不相信,我也问过这个问题itelligently!

jquery dom
2个回答
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>

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>
© www.soinside.com 2019 - 2024. All rights reserved.