程序在 JSFiddle 中运行良好，但在 Opera 浏览器上输出时呈梨形答案

【问题标题】：Program works fine in JSFiddle, but goes pear shaped when outputted on Opera browser程序在 JSFiddle 中运行良好，但在 Opera 浏览器上输出时呈梨形
【发布时间】：2015-01-28 23:15:42
【问题描述】：

我之前问过这个问题，并且得到了用户“Cristian Olaru”的完美答案——我说完美是因为当我在他提供的 JSFiddle 中运行它时，我得到了我正在寻找的结果.

但是当我在浏览器上运行它时，出现了三辆汽车的图像图标，但是当我将鼠标指针放在图像上时，没有文本框，也没有提交按钮。

我正在向您展示 Cristian 提供给我的代码，除了我添加了背景颜色并添加了一些 HTML 标签，如 JSFiddle 没有配备的 DOCTYPE HTML 和 HEAD。

我没有改变其他任何东西。您看到的内容与克里斯蒂安的代码相同。代码在 JSFiddle 中完美执行但在浏览器中不完美执行的原因是什么？

       <!DOCTYPE html>
       <html>
       <head>
       <style>

       body {
       background-color: #ADD8E6;
      }

      #form {
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%)
      }

     .car {
     float: left;
     margin: 2% 2% 5% 2%;
     }

     .car label img {
     transform: scale(0.8);
     transition-duration: 0.2s;
     }

     .car label img:hover {
     cursor: pointer;
     transform: scale(1);
     }

     .comment {
     position: absolute;
     visibility: hidden;
     }

    .comment input {
    width: 128px;
    font-size: 1em;
    }

   .car label img {
   width: 128px;
   display: block;
   }

   #button {
   position: relative;
   left: 66%;
   margin: 2%;
   visibility: hidden;
   }

   </style>
   </head>
   <body>

   <div id="form">
   <form method="post" action="#">

   <div class="car">
   <label for="mercedesbenz">
   <img src="http://tinyurl.com/on964r9">
   </label>

   <div class="comment">
   <input type="text" id="mercedesbenz" placeholder="Merc" />
   </div>
   </div>
   <div class="car">
   <label for="porche">
   <img src="http://tinyurl.com/on964r9">
   </label>
   <div class="comment">
   <input type="text" id="Porche" placeholder="Porc" />
   </div>
   </div>
   <div class="car">
   <label for="bmw">
   <img src="http://tinyurl.com/on964r9">
   </label>
   <div class="comment">
   <input type="text" id="bmw" placeholder="Beemer" />
   </div>
   </div>
   <input id="button" type="submit" name="submit" value="Submit">
   </form>
   </div>


   <script>
   $('.car').click(function() {
   $('.comment').css("visibility", "hidden");
   $('#button').css("visibility", "hidden");

   var id = $(this).children('label').attr('for');
   var buttonOffset;
   switch(id) {
   case 'mercedesbenz':
   buttonOffset = '0';
   break;
   case 'porche':
   buttonOffset = '33%';
   break;
   case 'bmw':
   buttonOffset = '66%';
   break;
   }

   $(this).children('.comment').css("visibility", "visible");
   $('#button').css("left", buttonOffset);
   $('#button').css("visibility", "visible");
   });

   $('.comment').mouseleave(function() {
   setTimeout(function () {
   $('.comment').css("visibility", "hidden");
   $('#button').css("visibility", "hidden");
   }, 500);
   });

   </script>

   </body>
   </html>

【问题讨论】：

因为你没有包含 jQuery？
Cristian 的代码中没有 jQueries。
$('#button').css("left", buttonOffset); 在我看来就像 jQuery。
$ 是 jQuery 对象别名，所以这里有 jQuery。确保将它包含在 <head> 元素中（如果还使用 jQuery 库，这是您导入的第一件事）。
Drew，感谢您的意见，谢谢。

标签： javascript jquery html css opera

【解决方案1】：

看看那个 JSFiddle 的屏幕截图。

这就是当您尝试在不包含 jQuery 库的情况下实现代码时无法运行的原因。

要解决此问题，请将其添加到标题中

<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>

【讨论】：

Isabel，非常感谢你给了我（PHP 相当优秀但 JavaScript/JQuery 毫无希望的人）一个直接的答案！
振作起来。对于可能不熟悉 JSFiddle 的人来说，这是一个很好的问题。很抱歉你被否决了。我根本不擅长 php，所以谁知道呢？有一天你可以帮助我。最好的祝愿。 :)