Question

这很奇怪！我正在研究我的CSS和jquery刚停止工作！在firefox / chrome中检查并且jquery刚停止工作！我不知道发生了什么。

我有两个功能正在进行中。第一部分为标题图像设置动画，第二部分在单击时生成随机数。我将整个代码粘贴在pastebin上。

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Hello </title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/default.css">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script src="js/jquery.js"></script>
</head>
<body>
  <!-- #header Image -->
  <img id="header" src="images/header.png" width="424" height="63" alt="Header">
  <!-- /#header Image -->
  <div id="main-wrapper">
    <h1> Your points will be genarated below </h1>

    <form>
      <input id="points" type="text"/>
      <input type="button" id="generate" value="Generate Points!" />
    </form>

  </div><!-- /#main-wrapper -->
  <!-- Generate -->
  <script src="js/gen.js" type="text/javascript" charset="utf-8"></script>

</body>

$(document).ready(function(){
      // Makes the image go under the div wrapper.
     $('img#header').css({'position' : 'relative', 'top' : '17px', 'z-index' : '50' })
    //create the animation
     $('img#header').hover(function()
  {
    $(this).filter(':not(:animated)').animate({"top": "-3px" }, "slow");
      }, function() {
    $(this).stop().animate({"top": "17px"}, "slow");
  });



  // Generate Numbers 
    $("#generate").click(function(){
      var code = "";
      var alphabet = new Array('A', 'B', 'C', 
               'D', 'E', 'F', 
               'G', 'H', 'I', 
               'J', 'K', 'L', 
                 'M', 'N', 'O', 
                 'P', 'Q', 'R', 
               'S', 'T', 'U', 
               'U', 'V', 'W', 
                 'X', 'Y', 'Z');
        var count = 5 * 4;
        for (var i=0; i<count; i++){
          var number = false;
          var type = Math.round(Math.random() * 2);
          if (type == 0) number = true; else number = false;
            var output;
            if (number){
              code += String(Math.floor(Math.random() * 10));
          }
            else
          {
            var ranChar = Math.floor(Math.random() * alphabet.length)
            code += alphabet[ranChar];
          }
          if (((i+1) % 5 == 0) && i != count-1) code += "-";
        }
          $("#points").val(code);
      });
    });


body { background: #0d0d0d url(../images/body-bg.jpg) repeat; width: 500px; margin: 154px auto; } 
img#header { padding: 0 41px; }

div#main-wrapper { background: #dfdfdf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; position: relative; z-index: 1000; padding:                       44px  64px; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000;  }

div#main-wrapper h1 { color: #0d0d0d; font: italic bold 1.2em Georgia, Arial, Serif; text-align: center; text-shadow: -1px 1px 0 #fff; margin-bottom: 38px; }

/* Form Generator */
form {}
form input[type="text"]#points { background: #d6d6d6; border: 1px #909090 solid; display: block; font: bold 1.3em Arial, Serif; margin: 0 auto; padding: 10px;  }
form input[type="button"]#generate { background: #2d69bd; background: -webkit-gradient(linear, 0% 0%, 0% 71%, from(#3171CA), to(#15396F)); background: -moz-linear-gradient(21% 74% 90deg,#15396F, #3171CA); border: 1px #5b93d1 solid; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; padding: 10px; }

css和jquery正在运行，然后由于某种原因它停止了工作。

Answer 1

你说你的jQuery工作正常，直到你开始使用你的CSS。可能是因为你没有关闭你的CSS包括：

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/default.css">

应该是：

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/default.css" />

jquery对我不起作用！

1 个答案: