jQuery-如果没有选择的选项不起作用则发出警报
[英]jQuery - alert if no option chosen doesn't work
问题描述
我有一个功能，当您单击“播放”按钮时，选项和按钮会消失。
我试图添加一条if语句，该语句表明如果未选择任何内容，则屏幕上会出现警报，并且游戏无法启动。 但是，这不起作用。
这是我的代码：
$(document).ready(function() { $('#options').change(function() { // NOTE: all themes have capital letters on colors if ($(this).val() === 'Dark') { $("#game").css("background-color", "black"); $("#player").css({ "background-color": "white" // using CSS function in case you want to add other stuff }); } if ($(this).val() === 'Light') { $("#game").css("background-color", "white"); $("#player").css({ "background-color": "black" // using CSS function in case you want to add other stuff }); } }); $("#play").click(function() { if ($("#options").val != "none") { // NOTE: not working $(this).hide(); $("#options").hide(); $("#player").show(); } else if ($("#options").val === "none") { alert("You haven't selected a theme") } }); });
body { background-color: #FFFFFF; font-family: helvetica, sans-serif; } #main_title { font-size: 4em; color: #000; text-shadow: 2px 2px #999999; } .block { width: 60px; height: 60px; position: absolute; } #game { width: 1000px; height: 550px; border: 3px solid #000000; margin: 2% 10%; position: relative; } #player { width: 40px; height: 40px; left: 50%; bottom: 0; position: absolute; } #play { padding: 1%; color: white; background-color: black; border-style: solid; } #options {}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trash Fall - Game</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- adding jQuery to the script --> <script src="script.js"></script> </head> <body> <h1 id="main_title">Color Drop</h1> <button id="play">Play</button> <select id="options"> <option value="none">none (choose one in order to play)</option> <option value="Dark">Dark</option> <option value="Light">Light</option> <option value="Blue_White">Blue/White</option> <option value="Red_White">Red/White</option> </select> <div id="game"> <div id="player"></div> </div> </body> </html>
为什么这不起作用？
2 个解决方案
解决方案1
1 已采纳 2016-06-11 17:39:36
在此行的代码中：
if ($("#options").val != "none") { // NOTE: not working
...
您正在使用.val因为它是一个属性。 虽然这是一个方法（ .val() ）：
if ($("#options").val() != "none") { // `val` --> `val()`
...
您似乎已经清楚地知道这一点； 您可能只是忘记或错过了括号。
解决方案2
1 2016-06-11 17:40:38
使用这样的脚本， $（“＃options”）。val（）代替$（“＃options”）。val ， 如果有条件则不需要其他脚本
$("#play").click(function() {
if ($("#options").val() != "none") { // NOTE: not working
$(this).hide();
$("#options").hide();
$("#player").show();
}else {
alert("You haven't selected a theme")
}
});
jQuery选择并验证：验证不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.