jQuery - 如果没有选择的选项不起作用,则发出警报

时间:2016-06-11 17:34:05

标签: javascript jquery html css

我有一个功能,当你点击"播放"按钮,选项和按钮消失。

我尝试添加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>
&#13;
&#13;
&#13;

为什么这不起作用?

2 个答案:

答案 0 :(得分:1)

在此行的代码中:

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

您正在使用.val,因为它是一个属性。虽然它是一种方法(.val()):

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

你似乎已经清楚地知道了;你可能只是忘记或遗漏了括号。

答案 1 :(得分:1)

使用这样的脚本, $(&#34;#options&#34;)。val()而不是 $(&#34;#options&#34;)。val 无条件

$('#UploadExcel').submit(function(){
        $.ajax({
            url:'UploadServlet',
            type:'POST',
            dataType:'json',
            data: $('#UploadExcel').serialize(),
           success: function(data){
               if(data.isValid){
                   $("#ShowSheets").modal("show");
               }else{
                   alert('Please Put a Valid Excel Sheet');
               }
           }
        });
        return false;
    });