我想要一些帮助,只要点击它,“显示图片”按钮就会显示/隐藏图片。我正在尝试使用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 :(得分:0)
首先将所有图像的不透明度切换为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!");
});
&#13;
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;
}
&#13;
<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" />
&#13;
ps:你真的需要干你的代码