JavaScript 编码协助

标签 javascript jquery css

我需要一些帮助来使“显示图片”按钮在单击时显示/隐藏图片。我正在尝试使用 If/Else 语句来完成它，因为它用于学校元素并且是必需的。由于某种原因我无法弄清楚，我们将不胜感激!

$(document).ready(function() {

  $('#showA').on('click', function() {
    $('#house1').css('opacity', 1).fadeIn('slow');
  });

  $('#resetA').click(function() {
    $(this).parent('form').find('input[type="text"]').val('');
  });

  $('#submitA').click(function() {
    window.alert("You will be contacted through email shortly in order to process your payment method for the home in Chatham, MA. Thank you for choosing Bazegian Cape Cod Rental Homes!");
  });

  $('#showB').on('click', function() {
    $('#house2').css('opacity', 1).fadeIn('slow');
  });

  $('#resetB').click(function() {
    $(this).parent('form').find('input[type="text"]').val('');
  });

  $('#submitB').click(function() {
    window.alert("You will be contacted through email shortly in order to process your payment method for the home in Wellfleet, MA. Thank you for choosing Bazegian Cape Cod Rental Homes!");
  });

  $('#showC').on('click', function() {
    $('#house3').css('opacity', 1).fadeIn('slow');
  });

  $('#resetC').click(function() {
    $(this).parent('form').find('input[type="text"]').val('');
  });

  $('#submitC').click(function() {
    window.alert("You will be contacted through email shortly in order to process your payment method for the home in Dennis, MA. Thank you for choosing Bazegian Cape Cod Rental Homes!");
  });

  $('#showD').on('click', function() {
    $('#house4').css('opacity', 1).fadeIn('slow');
  });

  $('#resetD').click(function() {
    $(this).parent('form').find('input[type="text"]').val('');
  });

  $('#submitD').click(function() {
    window.alert("You will be contacted through email shortly in order to process your payment method for the home in Provincetown, MA. Thank you for choosing Bazegian Cape Cod Rental Homes!");
  });
});
img {
  padding: 29px;
  opacity: 0;
  width: 250px;
  height: 250px;
}

div {
  vertical-align: top;
  width: 267px;
  height: auto;
  display: inline-block;
  padding: 20px;
  margin: 0px;
  border-radius: 10px;
  border: 1px solid;
}

p {
  margin: 5px;
  padding: 3px;
  background-color: blue;
  border-radius: 8px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/finalproject.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/finalproject.js">
  </script>
  <title>Final Project</title>
</head>

<body>
  <center>
    <h1>Bazegian Cape Cod Rental Homes</h1>
  </center>

  <div>
    <form id="chatham">
      <label><b><u>Chatham, MA</u></b></label><br>
      <label><b>$300 a Day</b></label><br>
      <label>Name:</label><br>
      <input name="nameA" type="text" /><br>
      <label>Email Address:</label><br>
      <input name="emailA" type="text" /><br>
      <label>Phone Number:</label><br>
      <input name="phoneA" type="text" /><br>
      <label>How many days would you like to rent?</label><br>
      <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
      <input id="showA" type="button" value="Show Picture">
      <input id="submitA" type="button" value="Submit">
      <input id="resetA" type="button" value="Reset">
    </form>
  </div>

  <div>
    <form id="wellfleet">
      <label><b><u>Wellfleet, MA</u></b></label><br>
      <label><b>$250 a Day</b></label><br>
      <label>Name:</label><br>
      <input name="nameB" type="text" /><br>
      <label>Email Address:</label><br>
      <input name="emailB" type="text" /><br>
      <label>Phone Number:</label><br>
      <input name="phoneB" type="text" /><br>
      <label>How many days would you like to rent?</label><br>
      <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
      <input id="showB" type="button" value="Show Picture">
      <input id="submitB" type="button" value="Submit">
      <input id="resetB" type="button" value="Reset">
    </form>
  </div>

  <div>
    <form id="dennis">
      <label><b><u>Dennis, MA</u></b></label><br>
      <label><b>$350 a Day</b></label><br>
      <label>Name:</label><br>
      <input name="nameC" type="text" /><br>
      <label>Email Address:</label><br>
      <input name="emailC" type="text" /><br>
      <label>Phone Number:</label><br>
      <input name="phoneC" type="text" /><br>
      <label>How many days would you like to rent?</label><br>
      <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
      <input id="showC" type="button" value="Show Picture">
      <input id="submitC" type="button" value="Submit">
      <input id="resetC" type="button" value="Reset">
    </form>
  </div>

  <div>
    <form id="provincetown">
      <label><b><u>Provincetown, MA</u></b></label><br>
      <label><b>$300 a Day</b></label><br>
      <label>Name:</label><br>
      <input name="nameD" type="text" /><br>
      <label>Email Address:</label><br>
      <input name="emailD" type="text" /><br>
      <label>Phone Number:</label><br>
      <input name="phoneD" type="text" /><br>
      <label>How many days would you like to rent?</label><br>
      <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
      <input id="showD" type="button" value="Show Picture">
      <input id="submitD" type="button" value="Submit">
      <input id="resetD" type="button" value="Reset">
    </form>
  </div>

  <img id="house1" src="images/chatham.jpg" />
  <img id="house2" src="images/wellfleet.jpg" />
  <img id="house3" src="images/dennis.jpg" />
  <img id="house4" src="images/provincetown.jpg" />
</body>

</html>

最佳答案

首先将所有图像的不透明度切换为0，然后显示正确的图像

$('img').css('opacity',0);


$('.show').on('click', function() {
  $('img').css('opacity', 0);
  var ind = $(this).closest('.house').parent().index();
  $('img').eq(ind).css('opacity', 1).fadeIn('slow');
});

$('.reset').click(function() {
  $(this).parent('form').find('input[type="text"]').val('');
});

$('.submit').click(function() {
  window.alert("You will be contacted through email shortly in order to process your payment method for the home in Chatham, MA. Thank you for choosing Bazegian Cape Cod Rental Homes!");
});
img {
  padding: 29px;
  opacity: 0;
  width: 250px;
  height: 250px;
}

div {
  vertical-align: top;
  width: 267px;
  height: auto;
  display: inline-block;
  padding: 20px;
  margin: 0px;
  border-radius: 10px;
  border: 1px solid;
}

p {
  margin: 5px;
  padding: 3px;
  background-color: blue;
  border-radius: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <h1>Bazegian Cape Cod Rental Homes</h1>
</center>

<div>
  <form class="house">
    <label><b><u>Chatham, MA</u></b></label><br>
    <label><b>$300 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameA" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailA" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneA" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
    <input class="show" type="button" value="Show Picture">
    <input class="submit" type="button" value="Submit">
    <input class="reset" type="button" value="Reset">
  </form>
</div>

<div>
  <form class="house">
    <label><b><u>Wellfleet, MA</u></b></label><br>
    <label><b>$250 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameB" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailB" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneB" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
    <input class="show" type="button" value="Show Picture">
    <input class="submit" type="button" value="Submit">
    <input class="reset" type="button" value="Reset">
  </form>
</div>

<div>
  <form class="house">
    <label><b><u>Dennis, MA</u></b></label><br>
    <label><b>$350 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameC" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailC" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneC" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
    <input class="show" type="button" value="Show Picture">
    <input class="submit" type="button" value="Submit">
    <input class="reset" type="button" value="Reset">
  </form>
</div>

<div>
  <form class="provincetown">
    <label><b><u>Provincetown, MA</u></b></label><br>
    <label><b>$300 a Day</b></label><br>
    <label>Name:</label><br>
    <input name="nameD" type="text" /><br>
    <label>Email Address:</label><br>
    <input name="emailD" type="text" /><br>
    <label>Phone Number:</label><br>
    <input name="phoneD" type="text" /><br>
    <label>How many days would you like to rent?</label><br>
    <select>
  			<option value="5-10">5-10 Days</option>
  			<option value="6-7">10-15 Days</option>
  			<option value="8-9">15-20 Days</option>
		</select>
    <input class="show" type="button" value="Show Picture">
    <input class="submit" type="button" value="Submit">
    <input class="reset" type="button" value="Reset">
  </form>
</div>

<img class="img" src="images/chatham.jpg" />
<img class="img" src="images/wellfleet.jpg" />
<img class="img" src="images/dennis.jpg" />
<img class="img" src="images/provincetown.jpg" />

ps:你真的需要DRY你的代码

关于JavaScript 编码协助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43648409/

上一篇：javascript - 我的 jQuery 脚本在 jsfiddle 中测试时有效，但在我的 HTML 文档中无效

下一篇：javascript - jQuery 单选按钮检查添加类，否则如果单选按钮未选中则删除类？

相关文章：

javascript - Jquery选择器-根据属性值获取元素

javascript - jQuery promise 是否符合 Promises/A+

jquery 提交更改

css - Ion-tabs 和 hide-nav-bar 留下空间，top 0px 也

css - Chrome CSS 背景图像出现白色区域

javascript - 如何将带有重音字符的 url 从 Angular Controller 输出到 href 属性？

javascript - 如何配置 mocha 以递归方式查找所有测试文件？

javascript - 如何确定鼠标光标的起点和终点？

java - 通过 JQuery 向 Java 发送 JSON

html - 如何使用 AngularJS 在我的页面上的模式下放置一个 mask ？

©2024 IT工具网  联系我们