＆安培;＆安培;功能不起作用

Question

＆＃13;

＆＃13;

 	var pet = $("structureValue").val() == "Pet";
 var Color = $("button").on("click",function(){
 	var color =$("#color");
 	var roof  =  $("#structureValue").val() ==  "Roof";
 	var building =$("#structureValue").val() ==  "Building";
 	var colorId=$(color).val();
	if(colorId == "a" &&  roof){
		$("#build").css("color", "grey")
	}else if(colorId == "b" && roof){
		$("#build").css("color", "green")
	}else if(colorId == "c" && roof){
		$("#build").css("color", "orange")
	}else if(colorId == "d" && roof){
		$("#build").css("color", "yellow")
	}else if(colorId == "a" && building){
		$("#building").css("background", "grey")
	}else if(colorId == "b" && building){
		$("#building").css("background", "green")
	}else if(colorId == "c" && building){
		$("#building").css("background", "orange")
	}else if(colorId == "d" && building){
		$("#building").css("background", "yellow")
	}
});

 /*--------------------Function------------------*/
 $("#structureValue ").on("click",function(){
   $("#structureValue").change(function(){
   	var val = $(this).val();
 	if(val == "Environment"){
 $("#color").html("<option  value='a'>Mountain</option><option value='b'>Lakeside</option><option value='c'>Beach</option><option value='d'>Island</option>");
 }else if(val == "Pet"){
$("#color").html("<option  value='a'>Squire</option><option value='b'>Chinchilla</option><option value='c'>Dinosaur</option><option value='d'>Dog</option>");
 }else if (val == "Roof","Building"){
 $("#color").html("<option value='a'>Gray</option><option value='b'>Green</option><option value='c'>Orange</option><option value='d'>Yellow</option>")}
});
});
  $("#firstButton").on("click", function(){
    	var color =$("#color");
        var colorId=$(color).val();
 if($("#structureValue").val() ==  "Roof" ){
 	$("#build").css({"width":"0",
 		"height":"0","border-left":" 250px solid transparent","border-right":" 250px solid transparent",
 		"border-bottom":" 350px solid ","background":"none", Color });
 }else if($("#structureValue").val() ==  "Building"){
 	$("#building").css({"width":"500px",
 		"height":"300px",Color })
 }else if($("#structureValue").val() == "Environment" &&  colorId == "a"){
      $("body").css({"background":"url('https://tpwd.texas.gov/state-parks/franklin-mountains/gallery/franklin-mnt_panorama1.jpg')no-repeat center center fixed",
  "-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});
 }else if($("#structureValue").val() == "Environment" &&  colorId == "b"){
      $("body").css({"background":"url('https://openclipart.org/image/2400px/svg_to_png/218873/Autumn-By-The-Lake.png')no-repeat center center fixed",
  "-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});
 }else if($("#structureValue").val() == "Environment" &&  colorId == "c"){
     $("body").css({"background":"url('http://travel.home.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-10-caribbean-beaches-eagle-beach-aruba.jpg.rend.hgtvcom.966.725.suffix/1491584555480.jpeg')no-repeat center center fixed",
  "-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});
 }else if($("#structureValue").val() == "Environment" &&  colorId == "d"){
     $("body").css({"background":"url('http://www.jeremyrobinsononline.com/wp-content/uploads/2013/05/White_Island_New_Zealand.jpg')no-repeat center center fixed",
  "-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});

 }else if($("#structureValue").val() == "Pet" &&  colorId == "a"){
      $("#pet").empty().append("<img class='secert' src='https://media.giphy.com/media/eGOorb2NowXny/giphy.gif'></img>");
 }else if($("#structureValue").val() == "Pet" &&  colorId == "b"){
      $("#pet").empty().append("<img class='secert' src='https://assets.horsenation.com/wp-content/uploads/2013/09/1379338067174322.gif'></img>");
 }else if($("#structureValue").val() == "Pet" &&  colorId == "c"){
     $("#pet").empty().append("<img class='secert' src='https://i0.wp.com/media.giphy.com/media/TfFbA8xkrIymk/giphy.gif?resize=500%2C281&ssl=1'></img>");
 }else if($("#structureValue").val() == "Pet" &&  colorId == "d"){
     $("#pet").empty().append("<img class='secert' src='http://s3.amazonaws.com/barkpost-assets/50+GIFs/17.gif'></img>");
 }
});

$("#firstButton").click(function(){
    if($("#structureValue").val() == "Building" && "Environment" && "Roof"  && "Pet"  ){
    	$("#suprise").css("visibility","visible");

    }else{
    	console.log("wrong")
    }
});
$("#suprise").click(function(){
	$("#glide").addClass("glide");
 setTimeout(function(){ $(".secert").css("visibility","visible");
}, 4500);
 setTimeout(function(){
   location.reload();
  }, 8500);
})

＆＃13;

body{background-color: green;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
background-size: 100% 100%
}
img{
	max-width: 100%;
	height: 300px;
}
#wrapper{
	width: 100%;
	text-align: center;

}
#build,#building,#doors,#windows{
	margin: 0 auto;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.glide{
	animation-name:glide;
	animation-duration:8.5s;
	animation-iteration-count: 1;
	animation-direction:normal;
	position: absolute;
}

@-webkit-keyframes glide {
    0%   { left:0px; top:0px;}
    15%  { left:0; top:50%;}
    25%  {left:80%; top:50%;}
    35%  {left:80%; top:0;}
    40%  { left:35%; top:0%;}
    75% { left:35%; top:15%;}
    100% { left:35%; top:15%;}

}

#suprise{
    visibility:hidden;
	margin-top: 30px;
}
.secert{
	visibility: hidden;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="build a house.css">
	<title></title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body class="cf">
	<div id="wrapper">
      <h1>What animal is in your house?</h1>
      Create a home vision
      <select id="structureValue">
         <option value="Roof" name="structure">Roof</option>
         <option value="Building" name="structure">Building</option>
         <option  value="Environment" name="structure">Environment</option>
         <option   value="Pet" name="structure">Pet</option>
      </select>
      Choose the details
       <select id="color">

         <option value="a">Gray</option>
         <option value="b">Green</option>
         <option value="c">Orange</option>
         <option value="d">Yellow</option>
      </select>
      <button id="firstButton">Click Me</button>
      <br>
       <button id="suprise">What's in my house</button>
   <div id="glide">
      <div id="build">
        
      </div>
      <div id="building">
           <div id="pet"></div>
      </div>
   </div>
     
<script type="text/javascript" src="build a house.js"></script>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

我的功能在运行之前并未运行所有&&。截至目前我点击： 建立绿色然后单击该功能使我的惊喜按钮可见。我希望函数必须先点击所有选项，而不仅仅是构建值。然后让我的surprise button变得可见。 我希望它如此运行：

• 屋顶绿色（或其他选项），然后单击
• 构建绿色（或其他选项），然后单击
• 位置绿色（或其他选项），然后单击
• 宠物绿色（或其他选项），然后单击

完成所有操作后，请surprise button显示：

之前的功能是我遇到问题的功能。 它以$("#firstButton").click(function()

开头

＆＃13;

＆＃13;

var pet = $("structureValue").val() == "Pet";
var Color = $("button").on("click", function() {
  var color = $("#color");
  var roof = $("#structureValue").val() == "Roof";
  var building = $("#structureValue").val() == "Building";
  var colorId = $(color).val();
  if (colorId == "a" && roof) {
    $("#build").css("color", "grey")
  } else if (colorId == "b" && roof) {
    $("#build").css("color", "green")
  } else if (colorId == "c" && roof) {
    $("#build").css("color", "orange")
  } else if (colorId == "d" && roof) {
    $("#build").css("color", "yellow")
  } else if (colorId == "a" && building) {
    $("#building").css("background", "grey")
  } else if (colorId == "b" && building) {
    $("#building").css("background", "green")
  } else if (colorId == "c" && building) {
    $("#building").css("background", "orange")
  } else if (colorId == "d" && building) {
    $("#building").css("background", "yellow")
  }
});

/*--------------------Function------------------*/
$("#structureValue ").on("click", function() {
  $("#structureValue").change(function() {
    var val = $(this).val();
    if (val == "Environment") {
      $("#color").html("<option  value='a'>Mountain</option><option value='b'>Lakeside</option><option value='c'>Beach</option><option value='d'>Island</option>");
    } else if (val == "Pet") {
      $("#color").html("<option  value='a'>Squire</option><option value='b'>Chinchilla</option><option value='c'>Dinosaur</option><option value='d'>Dog</option>");
    } else if (val == "Roof", "Building") {
      $("#color").html("<option value='a'>Gray</option><option value='b'>Green</option><option value='c'>Orange</option><option value='d'>Yellow</option>")
    }
  });
});
$("#firstButton").on("click", function() {
  var color = $("#color");
  var colorId = $(color).val();
  if ($("#structureValue").val() == "Roof") {
    $("#build").css({
      "width": "0",
      "height": "0",
      "border-left": " 250px solid transparent",
      "border-right": " 250px solid transparent",
      "border-bottom": " 350px solid ",
      "background": "none",
      Color
    });
  } else if ($("#structureValue").val() == "Building") {
    $("#building").css({
      "width": "500px",
      "height": "300px",
      Color
    })
  } else if ($("#structureValue").val() == "Environment" && colorId == "a") {
    $("body").css({
      "background": "url('https://tpwd.texas.gov/state-parks/franklin-mountains/gallery/franklin-mnt_panorama1.jpg')no-repeat center center fixed",
      "-webkit-background-size": "cover",
      "-moz-background-size": "cover",
      "-o-background-size": "cover",
      "background-size": "cover",
      "background-size": "100% 100%"
    });
  } else if ($("#structureValue").val() == "Environment" && colorId == "b") {
    $("body").css({
      "background": "url('https://openclipart.org/image/2400px/svg_to_png/218873/Autumn-By-The-Lake.png')no-repeat center center fixed",
      "-webkit-background-size": "cover",
      "-moz-background-size": "cover",
      "-o-background-size": "cover",
      "background-size": "cover",
      "background-size": "100% 100%"
    });
  } else if ($("#structureValue").val() == "Environment" && colorId == "c") {
    $("body").css({
      "background": "url('http://travel.home.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-10-caribbean-beaches-eagle-beach-aruba.jpg.rend.hgtvcom.966.725.suffix/1491584555480.jpeg')no-repeat center center fixed",
      "-webkit-background-size": "cover",
      "-moz-background-size": "cover",
      "-o-background-size": "cover",
      "background-size": "cover",
      "background-size": "100% 100%"
    });
  } else if ($("#structureValue").val() == "Environment" && colorId == "d") {
    $("body").css({
      "background": "url('http://www.jeremyrobinsononline.com/wp-content/uploads/2013/05/White_Island_New_Zealand.jpg')no-repeat center center fixed",
      "-webkit-background-size": "cover",
      "-moz-background-size": "cover",
      "-o-background-size": "cover",
      "background-size": "cover",
      "background-size": "100% 100%"
    });

  } else if ($("#structureValue").val() == "Pet" && colorId == "a") {
    $("#pet").empty().append("<img class='secert' src='https://media.giphy.com/media/eGOorb2NowXny/giphy.gif'></img>");
  } else if ($("#structureValue").val() == "Pet" && colorId == "b") {
    $("#pet").empty().append("<img class='secert' src='https://assets.horsenation.com/wp-content/uploads/2013/09/1379338067174322.gif'></img>");
  } else if ($("#structureValue").val() == "Pet" && colorId == "c") {
    $("#pet").empty().append("<img class='secert' src='https://i0.wp.com/media.giphy.com/media/TfFbA8xkrIymk/giphy.gif?resize=500%2C281&ssl=1'></img>");
  } else if ($("#structureValue").val() == "Pet" && colorId == "d") {
    $("#pet").empty().append("<img class='secert' src='http://s3.amazonaws.com/barkpost-assets/50+GIFs/17.gif'></img>");
  }
});

$("#firstButton").click(function() {
  if ($("#structureValue").val() == "Building" && $("#structureValue").val() == "Environment" && "Roof" && "Pet") {
    $("#suprise").css("visibility", "visible");

  } else {
    console.log("wrong")
  }
});
$("#suprise").click(function() {
  $("#glide").addClass("glide");
  setTimeout(function() {
    $(".secert").css("visibility", "visible");
  }, 4500);
  setTimeout(function() {
    location.reload();
  }, 8500);
})

＆＃13;

body {
  background-color: green;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100% 100%
}

img {
  max-width: 100%;
  height: 300px;
}

#wrapper {
  width: 100%;
  text-align: center;
}

#build,
#building,
#doors,
#windows {
  margin: 0 auto;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.glide {
  animation-name: glide;
  animation-duration: 8.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  position: absolute;
}

@-webkit-keyframes glide {
  0% {
    left: 0px;
    top: 0px;
  }
  15% {
    left: 0;
    top: 50%;
  }
  25% {
    left: 80%;
    top: 50%;
  }
  35% {
    left: 80%;
    top: 0;
  }
  40% {
    left: 35%;
    top: 0%;
  }
  75% {
    left: 35%;
    top: 15%;
  }
  100% {
    left: 35%;
    top: 15%;
  }
}

#suprise {
  visibility: hidden;
  margin-top: 30px;
}

.secert {
  visibility: hidden;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="build a house.css">
  <title></title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>

<body class="cf">
  <div id="wrapper">
    <h1>What animal is in your house?</h1>
    Create a home vision
    <select id="structureValue">
         <option value="Roof" name="structure">Roof</option>
         <option value="Building" name="structure">Building</option>
         <option  value="Environment" name="structure">Environment</option>
         <option   value="Pet" name="structure">Pet</option>
      </select> Choose the details
    <select id="color">
         <option value="a">Gray</option>
         <option value="b">Green</option>
         <option value="c">Orange</option>
         <option value="d">Yellow</option>
      </select>
    <button id="firstButton">Click Me</button>
    <br>
    <button id="suprise">What's in my house</button>
    <div id="glide">
      <div id="build">

      </div>
      <div id="building">
        <div id="pet"></div>
      </div>
    </div>

    <script type="text/javascript" src="build a house.js"></script>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码在很多方面都是非常错误的。深入了解我制作的代码。它将激励你如何做到这一点。

＆＃13;

＆＃13;

var myform = document.querySelector('#houseBuilder')
var building = document.querySelector('#building')
var suprise = document.querySelector('#suprise')
var roof = document.querySelector('#roof')
var pet = document.querySelector('#pet')

myform.addEventListener('submit', function(evenet){
	switch(myform.structure.value){
		case 'roof':
			roof.style.color = myform.color.value
			break;
		case 'building':
			building.style.backgroundColor = myform.color.value
			break;
		case 'environment':
			document.body.style.backgroundImage = "url('" + myform.environment.value + "')"
			break;
		case 'pet':
			pet.src = myform.pet.value
			break;
	}
	
	/*	Has user allready set all of building parts?	*/
	if(roof.style.color && building.style.backgroundColor && document.body.style.backgroundImage && pet.src){
		suprise.hidden = false
	}
	
	
	/*	Stop user from navigating	*/
	event.preventDefault();
	return false
})

myform.structure.addEventListener('change', function(){
	myform.environment.hidden = true
	myform.color.hidden = true
	myform.pet.hidden = true
	
	switch(myform.structure.value){
		case 'environment':
			myform.environment.hidden = false
			break;
		case 'pet':
			myform.pet.hidden = false
			break;
		default: 
			myform.color.hidden = false
			break;
	}
})

＆＃13;

#roof {
    width: 0px;
    height: 0px;
    border-left: 250px solid transparent;
    border-right: 250px solid transparent;
    border-bottom: 350px solid;
    background: none;
	
	/*	Will hide the roof until other color is set	*/
	color: transparent;
}

#building {
    width: 500px;
    height: 300px;
}

body {
	background-repeat: no-repeat;
	background-size: 100% 100%;
    background-size: cover;
}

#pet {
	margin-left: 10%;
	width: 80%;
}

＆＃13;

<form id="houseBuilder" name="home">
	<h1>What animal is in your house?</h1>
	<label>
		Create a home vision
		<select name="structure">
		 <option value="roof">Roof</option>
		 <option value="building">Building</option>
		 <option value="environment">Environment</option>
		 <option value="pet">Pet</option>
	  </select>
	</label>
	<br>
	<label>
		Choose the details
		<select name="color">
			<!-- Option's value is equal to it's innerText if no value us specified -->
			<option>Gray</option>
			<option>Green</option>
			<option>Orange</option>
			<option>Yellow</option>
	    </select>
		<select hidden name="pet">
			<option value="https://media.giphy.com/media/eGOorb2NowXny/giphy.gif">Squire</option>
			<option value="https://assets.horsenation.com/wp-content/uploads/2013/09/1379338067174322.gif">Chinchilla</option>
			<option value="https://i0.wp.com/media.giphy.com/media/TfFbA8xkrIymk/giphy.gif?resize=500%2C281&ssl=1">Dinosaur</option>
			<option value="http://s3.amazonaws.com/barkpost-assets/50+GIFs/17.gif">Dog</option>
	    </select>
		<select hidden name="environment">
			<option value="https://tpwd.texas.gov/state-parks/franklin-mountains/gallery/franklin-mnt_panorama1.jpg">Mountain</option>
			<option value="https://openclipart.org/image/2400px/svg_to_png/218873/Autumn-By-The-Lake.png">Lakeside</option>
			<option value="http://travel.home.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-10-caribbean-beaches-eagle-beach-aruba.jpg.rend.hgtvcom.966.725.suffix/1491584555480.jpeg">Beach</option>
			<option value="http://www.jeremyrobinsononline.com/wp-content/uploads/2013/05/White_Island_New_Zealand.jpg">Island</option>
		</select>
	</label>
	<br>
	<button>Click Me</button>
</form>
<button hidden id="suprise">What's in my house</button>
<div id="glide">
	<div id="roof"></div>
	<div id="building">
		<img id="pet">
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;