我正在创建一个多项选择测验,并且我在实施onClick侦听器时遇到了困难。
我尝试使用jQuery在选择按钮时创建警报,但这似乎不起作用。
有人可以看看它为什么没有被触发?另外,我如何传递列表项的内容?
<body>
<div class="central-area" id="central-area">
<div class="main multiple-choice">
<div class="question-row row column">
<div id="questionText" class="question-text">to be</div>
</div>
<div class="hint row column"> <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span> </div>
<ol id="choices" class="choices ">
<li class="choice " id="0"><span class="val">prêter</span><span class="marking-icon "></span></li>
<li class="choice " id="1"><span class="val">vêtir</span><span class="marking-icon "></span></li>
<li class="choice " id="2"><span class="val">être</span><span class="marking-icon "></span></li>
<li class="choice " id="3"><span class="val">tirer</span><span class="marking-icon "></span></li>
</ol>
</div>
</div>
</body>
使用Javascript:
function guess(choice) {
if (choice === "être") {
alert("Correct");
//Add correct class to chosen button
} else {
alert("Incorrect");
//Add incorrect class to chosen button
//Time delay, then add correct class to correct button
}
}
$( "li" ).click(function() {
alert( "Handler for .click() called." );
// guess(choice);
});
这是当前情况的重复:https://jsfiddle.net/a5j4zncv/16/
答案 0 :(得分:0)
您还没有添加JQuery库:
function guess(choice) {
if (choice === "être") {
alert("Correct");
//Add correct class to chosen button
} else {
alert("Incorrect");
//Add incorrect class to chosen button
//Time delay, then add correct class to correct button
}
}
$("li").on('click', function() {
alert("Handler for .click() called.");
guess($(this).text());
});
&#13;
.choice:hover {
cursor: pointer;
}
.choice.correct {
color: green;
}
.choice.incorrect {
color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="central-area" id="central-area">
<div class="main multiple-choice">
<div class="question-row row column">
<div id="questionText" class="question-text">to be</div>
</div>
<div class="hint row column"> <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span> </div>
<ol id="choices" class="choices ">
<li class="choice " id="0"><span class="val ">prêter</span><span class="marking-icon"></span></li>
<li class="choice " id="1"><span class="val ">vêtir</span><span class="marking-icon"></span></li>
<li class="choice " id="2"><span class="val ">être</span><span class="marking-icon"></span></li>
<li class="choice " id="3"><span class="val ">tirer</span><span class="marking-icon"></span></li>
</ol>
</div>
</div>
</body>
&#13;
答案 1 :(得分:0)
你走了。 你必须从每个li中选择文本然后进行比较。 同样正如Milan Chheda指出的那样,你必须包括JQ库。
function guess(choice) {
var ch = $(choice).text();
if (ch == "être") {
alert("Correct");
//Add correct class to chosen button
} else {
alert("Incorrect");
//Add incorrect class to chosen button
//Time delay, then add correct class to correct button
}
}
$( "#choices li" ).click(function() {
guess(this);
//alert( "Handler for .click() called." );
// guess(choice);
});
&#13;
.choice:hover {
cursor: pointer;
}
.choice.correct {
color: green;
}
.choice.incorrect {
color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="central-area" id="central-area">
<div class="main multiple-choice">
<div class="question-row row column">
<div id="questionText" class="question-text">to be</div>
</div>
<div class="hint row column"> <span class="hint-text">Select the correct <strong>French</strong> for the <strong>English</strong> above:</span> </div>
<ol id="choices" class="choices ">
<li class="choice " id="0"><span class="val ">prêter</span><span class="marking-icon"></span></li>
<li class="choice " id="1"><span class="val ">vêtir</span><span class="marking-icon"></span></li>
<li class="choice " id="2"><span class="val ">être</span><span class="marking-icon"></span></li>
<li class="choice " id="3"><span class="val ">tirer</span><span class="marking-icon"></span></li>
</ol>
</div>
</div>
</body>
&#13;