个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
您看到的代码是由 Stack Overflow 用户友情提供给我的，他的 JSFiddle 可以在 http://jsfiddle.net/f18513hw/ 找到.他的代码在 JSFiddle 中运行良好。我将他的代码复制并粘贴到我的 Textpad 中，并将其保存在 XAMPP 的 htdocs 文件夹中并尝试运行它。
我发现，当我将光标放在汽车图标上时，图标会放大(如预期的那样)，但我没有看到图标下方出现文本框。这就是我的网页的全部想法，将鼠标放在图像上并出现一个文本框，然后用户将他的评论插入该框中。当我问 Stack Overflow 用户为什么没有文本框出现时，一位女士和蔼地指出我缺少 jQuery 库链接，所以我也把它放了进去。
我检查并重新检查了代码的布局(JavaScript 和 jQuery 链接放在 head 标签内，CSS 代码放在 style 标签内)似乎没有错，但代码仍然 不运行。由于没有脚本是服务器端的，我决定不使用 XAMPP，只是将脚本保存在“我的文档”中并在浏览器上运行，但没有任何改变。有人可以告诉我我做错了什么吗？如果代码在 JFiddle 中运行，是否有任何韵律或理由说明它不应该在浏览器上运行？这太荒谬了。
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<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>
<style>
#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>
</body>
</html>
最佳答案
您的代码在加载 DOM 之前执行。您需要在 HTML 之后移动代码或使用 $(document).ready()以确保您的代码不会过早运行。
所以，当这样的代码运行时:
$('.car').click(function() {...});
没有 .car对象尚在 DOM 中，因此无法安装事件处理程序。
你可以这样做:
$(document).ready(function() {
$('.car').click(function() {...});
});
或者，您可以移动您的 <script>在 </body> 之前标记像这样标记，以便在脚本运行之前加载 DOM 元素:
<body>
... various HTML
<script>
$('.car').click(function() {...});
</script>
</body>
仅供引用，jsFiddle 的默认设置是在加载 DOM 之前不运行您的代码，这不是您的代码在真实网页中的方式 - 因此有时真实网页和 jsFiddle 之间存在差异。可以通过左上角的下拉菜单设置 jsFiddle，以控制 Javascript 何时运行。
关于javascript - 没有为 CSS 使用外部样式表会导致我的代码无法执行吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28259888/
25
4
0
我想知道有没有免费的PL/pgSQL开发环境。 在 Notepad++ 中编写代码，替换函数并运行它会使过程变慢。我目前正在使用 pgAdmin(仅用于替换和运行程序)，但这不是我想要的。 我知道这里
我是一名优秀的程序员,十分优秀！