我写了一个 CSS/HTML 代码，它应该显示三辆汽车的图片，当你点击一张图片时，会出现一个文本框，你可以在文本框中写下关于这辆车的评论，然后点击提交按钮。我检查并重新检查了我的代码，一切似乎都井井有条。我已将代码保存在 XAMPP 的 htdocs 文件夹中。现在，我的代码中没有涉及 PHP，所以我不需要服务器来执行文件，但据我所知，这应该无关紧要。因此，我在地址栏中输入“localhost/index1.php”并按回车键。令人惊讶的是，我得到的只是三辆车的图像，但没有提交按钮。当我将指针放在每辆车上时，单个汽车图像会变大(如预期的那样)，但不会出现文本框。这不应该发生。所以我决定重命名我的文件 index1.html 并像以前一样将它保存在 htdocs 文件夹中，但情况仍然存在。请有人告诉我为什么单击图标时没有显示文本框，为什么也没有出现提交按钮？
我现在已将 JavaScript 添加到我的代码中，但它仍然无法正常工作!!!
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code><!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>
</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre>
</div>
</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>
最佳答案
我认为你需要的是 JavaScript 来处理点击事件:
- 当您点击图片时:显示提交按钮和评论框。
- 当您点击提交按钮时:隐藏按钮和评论框。
注意:我将您的按钮类型从 submit 更改为 button 这样您就可以看到效果了。你应该把它作为 submit 放回你这边。
// show comment box when clicking on image
$("img").on("click", function() {
$(".comment").css({visibility:"hidden"});
$(".comment." + $(this).parent().attr("for")).css({visibility:"visible"});
$("#button").css({visibility:"visible"});
});
// hide button and comment when submitting
$("#button").on("click", function() {
$(".comment").css({visibility:"hidden"});
$("#button").css({visibility:"hidden"});
});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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="form">
<form method="post" action="#">
<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment mercedesbenz">
<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 porche">
<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 bmw">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="button" name="submit" value="Submit">
</form>
</div>关于javascript - 浏览器不输出带有文本框和提交按钮的网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28194047/