根据点击的图片显示不同的表单答案

【问题标题】：Show different form based on what image is clicked根据点击的图片显示不同的表单
【发布时间】：2018-03-13 19:30:16
【问题描述】：

我在屏幕上有 3 张图片。每个图像应在屏幕的相同位置显示不同的表单，并隐藏其他 2 个表单。

Image1：点击时显示form1并隐藏form2和form 3

Image2：点击时显示 form2 并隐藏 form1 和 form 3

Image3：点击时显示 form3 并隐藏 form1 和 form 2

表格应显示在同一位置。我只是通过在 URL 中发送一个参数来说明在屏幕上显示哪个表单来调用整个页面的解决方案。我真的很想根据当前单击的图像来显示正确的形式，而无需这样做。

我正在使用 HTML5、Bootstrap 4 和 JavaScript - 任何使用这些语言的建议都是完美的。

【问题讨论】：

创建一个你迄今为止尝试过的 jsfiddle
JavaScript 可以完成所有你想要的。

标签： javascript html bootstrap-4

【解决方案1】：

这样的问题有很多答案，请在提问之前尝试四处看看。

这是您见过的仅使用 JS 和 HTML 的最简单方法之一

JavaScript

const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');

const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');

imageOne.addEventListener("click", function() {
    formOne.style.display = "block";
    formTwo.style.display = "none";
    formThree.style.display = "none";
});

imageTwo.addEventListener("click", function() {
    formOne.style.display = "none";
    formTwo.style.display = "block";
    formThree.style.display = "none";
});

imageThree.addEventListener("click", function() {
    formOne.style.display = "none";
    formTwo.style.display = "none";
    formThree.style.display = "block;
});

HTML

<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">

<div id="formOne" style="display: none">
    <form>
        ....
    </form>
</div>

<div id="formTwo" style="display: none">
    <form>
        ....
    </form>
</div>

<div id="formThree" style="display: none">
    <form>
        ....
    </form>
</div>

【讨论】：

【解决方案2】：

好的，你需要：

3 张图片
3 种形式，具有绝对位置或固定位置（使它们保持在同一位置）
附加到每个图像的点击事件的 JS 函数，将对应的表单样式更改为 display:block，其他更改为 display:none。

类似：

var form1 = document.getElementById('form1')

document.getElementById('form1').onclick = function() {
  form1.style.display = 'block'
  form2.style.display = 'none'
  form3.style.display = 'none'
}

对于您的每一个表单。

这是我为展示如何操作而制作的一支工作笔。

https://codepen.io/jaimelopez18/pen/zWOEMw

这都是用纯js（香草）制作的。你应该先尝试学习这个，在你掌握它之后，我建议你看看 VueJS。

【讨论】：

【解决方案3】：

我只是按照你的要求在jsFiddle做了一个简单的骨架，看看代码。

HTML：

<html>
  <head>
  <script type='text/javascript' src="jquery.min.js"></script>
  </head>
  <body>
  <div class="jsImgWrp">
    <img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
    <img src="http://via.placeholder.com/350x150" class="jsImg"  data-formid="form2"/>
    <img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
    </div>
    <div class="jsFormWrp form-wrapper">
      <div class="jsFrm form1 active">
        form 1
      </div>
       <div class="jsFrm form2">
        form 2
      </div>
       <div class="jsFrm form3">
        form 3
      </div>
    </div>
  </body>
</html>

CSS：

.form-wrapper .jsFrm {
  display:none;
  padding:10px;
  border:solid 2px #eee;
  width:200px;
  height:100px;
}
.form-wrapper .jsFrm.active {
  display:block;
}
.jsImgWrp img {
  width:100px;
  display:inline-block;
}

Javascript：

$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
  var formId = $(this).data('formid');
  $('.jsFrm').removeClass('active');
  $('.' + formId).addClass('active');
})
});

希望对您有所帮助。

【讨论】：