无法弄清楚为什么js无法正常工作

时间：2017-04-26 14:53:41

标签： javascript

我试图这样做，当我点击“显示图片”按钮时，图片将淡入，显示房子的图片。出于某种原因，我无法让它为我的生活而工作。此外，我想帮助重置按钮工作以清除表单。

$(document).ready(function(){ 

 $(".showA").click(function() { 
    $("#house1").fadeIn("slow");
});
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>Vacation Rental</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>

3 个答案:

答案 0 :(得分：0)

您错过了一些括号，请参阅以下内容：

$(document).ready(function(){ 

 $(".showA").click(function() { 
    $("#house1").fadeOut("slow");
  });
}); //<---- I've added this line!

＆＃13;
＆＃13; 
$(document).ready(function(){ 

 $(".showA").click(function() { 
    $("#house1").fadeOut("slow");
  });
});
＆＃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; 
<!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>Vacation Rental</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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

问题是，在您的代码中，您正在执行=AVERAGEIFS(Analysis!$F:$F,Analysis!$F:$F,">=0",Analysis!$C:$C,Dashboard!C6,Analysis!$W:$W,Dashboard!B8) 而不是$('.showA')，因为它是您拥有的id属性，并且还会检查您是否必须修改{{1}能够看到图像。

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

答案 2 :(得分：0)

好的，你的代码有一些错误。

首先，您尝试按类$(".showA")而不是ID $("#showA")查找元素。您的元素没有 showA 类。

其次，您错过了$(document).ready结束标记。

我还制作了一个处理重置功能的事件。

见下文。

＆＃13;
＆＃13; 
$(document).ready(function(){ 

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

$('#resetA').click(function(){
   $(this).parent('form').find('input[type="text"]').val('');
});
});
＆＃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; 
<!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>Vacation Rental</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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题