OnClick偵聽器列出項目

我創建了一個多選題測驗，我在實現一個onClick偵聽器時遇到了困難。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/

來源

2017-08-13 Seth Killian

我想，而不是使用'列表（LI）'創建的選擇元素，它會更好，它使用'radio'或'checkbox'做 –

你在這裏。你必須從每個鋰選擇文本，然後比較它。同樣，米蘭奇達指出，你必須包括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); 
 
});

.choice:hover { 
 
    cursor: pointer; 
 
} 
 

 
.choice.correct { 
 
    color: green; 
 
} 
 

 
.choice.incorrect { 
 
    color: red; 
 
}

<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>

來源

2017-08-13 12:08:18 Peterpanx

你還沒有加入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()); 
 
});

.choice:hover { 
 
    cursor: pointer; 
 
} 
 

 
.choice.correct { 
 
    color: green; 
 
} 
 

 
.choice.incorrect { 
 
    color: red; 
 
}

<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>

來源

2017-08-13 11:53:14

OnClick偵聽器列出項目

回答

相關問題