个人中心
gpt4 book ai didi

javascript - 浏览器不输出带有文本框和提交按钮的网页

转载 作者：太空宇宙 更新时间：2023-11-04 03:19:08 25 4
gpt4 key购买 nike

我写了一个 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/

25 4 0
文章推荐： c - 在 C 中实现和使用动态数组
文章推荐： python - 快速计算矩阵元素的出现次数
文章推荐： python - 当 Python 处于优化模式时，如何对某些行为进行单元测试？
文章推荐： c - pic32 上的 TIMER 32 位不能使用中断
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com