「再生」ボタンをクリックすると、オプションとボタンが消える機能があります。jQuery - 選択したオプションが機能しない場合の警告
何も選択されていない場合、警告が画面に表示され、ゲームが開始しないという声明を追加しようとしました(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>
なぜこの作業ではないでしょうか?このライン上のあなたのコードで
' $( "#options")。val' - > '$("#options ")。 ['.val()'](http://api.jquery.com/val/)はメソッドであり、プロパティではありません。あなたはおそらくそれを見逃したり、忘れてしまったりします。 –
@SpencerWieczorekありがとう!私は今やとても愚かな気がする... :( – FlipFloop
@SpencerWieczorekは答えとして投稿しますか? – FlipFloop