2016-06-11 17 views
0

「再生」ボタンをクリックすると、オプションとボタンが消える機能があります。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>



なぜこの作業ではないでしょうか?このライン上のあなたのコードで

+0

' $( "#options")。val' - > '$("#options ")。 ['.val()'](http://api.jquery.com/val/)はメソッドであり、プロパティではありません。あなたはおそらくそれを見逃したり、忘れてしまったりします。 –

+0

@SpencerWieczorekありがとう!私は今やとても愚かな気がする... :( – FlipFloop

+0

@SpencerWieczorekは答えとして投稿しますか? – FlipFloop

答えて

1

:それは財産だったとしてあなたは.valを使用しているされている

if ($("#options").val != "none") { // NOTE: not working 
    ... 

。それは方法(.val())ですが:

if ($("#options").val() != "none") { // `val` --> `val()` 
    ... 

あなたは明らかに、すでに知っているように見えます。あなたはたぶん括弧を忘れてしまったかもしれません。このような

1

使用スクリプト、$( "#オプション" を参照)。valを()代わりの$( "#オプション" を参照)。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") 
    } 
    }); 
関連する問題