我用下面的功能的用户排序顺序,点击查询后的结果来检索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的。
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>
尝试这个
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>