Question

我编写了一个CSS / HTML代码，用于显示三辆汽车的图像，当您点击图片时，会出现一个文本框，您可以在文本框中写下关于汽车的评论，然后点击提交按钮。我检查并重新检查了我的代码，一切似乎都井然有序。我已将代码保存在XAMPP的htdocs文件夹中。现在，我的代码中没有涉及PHP，因此我不需要服务器来执行该文件，但据我所知，这应该不重要。所以，我输入＆＃34; localhost / index1.php＆＃34;进入地址栏并按回车键。令人惊讶的是，我得到的只是三辆车的图像，但没有提交按钮。当我将指针放在每辆车上时，单个汽车图像会变大（如预期的那样）但是文本框不会出现。这不应该发生。所以我决定重命名我的文件index1.html并像以前一样将它保存在htdocs文件夹中，但仍然存在这种情况。请有人告诉我为什么我点击图标时没有显示文本框，为什么没有提交按钮呢？

我现在已将JavaScript添加到我的代码中，但它仍然无效!!!



<!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>

   
<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>

Answer 1

.comment {
    position: absolute;
}

您隐藏了评论框

将提交按钮css更改为：

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

因此，这是完整版本：

http://jsfiddle.net/2khqdxtr/1/

Answer 2

我认为您需要的是处理点击事件的JavaScript：

点击图片时：显示提交按钮和评论框。
当您点击提交按钮时：隐藏按钮和评论框。

注意：我将您的按钮从submit类型更改为button，以便您可以看到效果。你应该把submit放在身边。

＆＃13;

// 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"});
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: