Question

我目前正在使用HTML，CSS和jQuery制作游戏。这将是通常的下降避免游戏。

我的jQuery遇到了麻烦。当我选择主题（目前只有黑暗主题＆＃34;工作＆＃34;）时，播放器不会显示：

＆＃13;

$(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
      });
    }
  });

  $("#play").click(function() {
    $(this).hide();
    $("#options").hide();
    $("#player").show();
  });


});

＆＃13;

body {
  background-color: #FFFFFF;
  font-family: helvetica, sans-serif;
}
.block {
  width: 60px;
  height: 60px;
  position: absolute
}
#game {
  width: 1000px;
  height: 550px;
  border: 3px solid #000000;
  margin: 2% 10%;
}
#player {
  width: 40px;
  height: 40px;
  left: 50%;
  bottom: 0;
  position: absolute
}
#play {
  padding: 1%;
  color: white;
  background-color: black;
  border-style: solid;
}
#options {}

＆＃13;

<!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>

  <div id="game">

    <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="player"></div>

  </div>

</body>

</html>

＆＃13;

注意：我看到这个在这个片段中有效，但它不能在github上工作（我在创建游戏的地方）：example GitHub

为什么这不起作用？

另外：为什么我们选择主题时主题和玩家会被添加到游戏部分？

GitHub链接：https://github.com/FlipFloop/Color-Drop

感谢所有人！

Answer 1

#player有position: absolute;，但#game未定位，因此播放器正好出现在文档的底部，通常是不可见的（白底白字）。尝试让#game拥有position:relative;。

编辑：@FlipFloop为了完整性，请将此评论作为答案与下面的代码段一起发布。全屏运行并关闭position: relative; #game，以说明问题/解决方案。

$(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
      });
    }
  });

  $("#play").click(function() {
    $(this).hide();
    $("#options").hide();
    $("#player").show();
  });


});

body {
  background-color: #FFFFFF;
  font-family: helvetica, sans-serif;
}
.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>

  <div id="game">

    <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="player"></div>

  </div>

</body>

</html>

Answer 2

你应该使用条件陈述，即。切换或if / else if / else，以捕获您的选项数据。在你的代码中，你只寻找黑暗的价值！

当我尝试这个（我有光照条件）时，它适用于Light值：

$(document).ready(function() {
        console.log("ok");

  $('#options').change(function(){ // NOTE: all themes have capital letters on colors
      console.log("ok");
    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": "white" // using CSS function in case you want to add other stuff
      });
    }
  });

  $("#play").click(function() {
    $(this).hide();
    $("#options").hide();
    $("#player").show();
  });


});

为什么我的div没有正常显示？

2 个答案: