确保同时点击了所有四个选项

Question

  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() == "Environment" && "Building" && "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); }) 

 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; } 

 <!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="z">please select</option> <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="z">please select</option> <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> 

 $("#suprise").click(function() { $("#glide").addClass("glide"); setTimeout(function() { $(".secert").css("visibility", "visible"); }, 4500); setTimeout(function() { location.reload(); }, 8500); }) $("#firstButton").click(function() { if ($("#structureValue").val() === "Environment" && "Building" && "Roof" && "Pet") { $("#suprise").css("visibility", "visible"); } }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> <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> 

For some odd reason, I can't get this function to work.

I want each option clicked then I want my function to turn my invisible div to visible.

How can I make sure all choices are made before the function run.

At the moment when I click Environment, it shows the #surprise visible.

I want to have to click all values for it to show #surprise visible.

Answer 1

try this

$('#firstButton').click(function(){
    $('#surpise').css("visibility",'visible');
});

Answer 2

Kinda unsure what it is you want, but try this.

var structure = ["Environment", "Building", "Roof", "Pet"];
var clickedElements = []
$("#firstButton").click(function() {
  if (structure.indexOf($("#structureValue").val()) > -1) {
    if (clickedElements.length == structure.length) {
      $("#suprise").css("visibility", "visible");
    } else {
      if (clickedElements.indexOf($("#structureValue").val()) == -1) {
        clickedElements.push($("#structureValue").val())
      }
    }
  }
});

Demo

 $("#suprise").click(function() { $("#glide").addClass("glide"); setTimeout(function() { $(".secert").css("visibility", "visible"); }, 4500); setTimeout(function() { location.reload(); }, 8500); }) var structure = ["Environment", "Building", "Roof", "Pet"]; var clickedElements = [] $("#firstButton").click(function() { if (structure.indexOf($("#structureValue").val()) > -1) { if (clickedElements.length == structure.length) { $("#suprise").css("visibility", "visible"); } else { if (clickedElements.indexOf($("#structureValue").val()) == -1) { clickedElements.push($("#structureValue").val()) } } } }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> <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> 

Answer 3

As I understand, I made a snippet for you. This will show the div when you select all the values from #structureValue select

 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>"); } }); var arrOne = []; var arrTwo = []; var arrOneSelected = []; var arrTwoSelected = []; $("#structureValue option").each(function() { arrOne.push($(this).html()); }); $("#color option").each(function() { arrTwo.push($(this).html()); }); //console.log(arrOne.slice(1),arrTwo.slice(1)); $('#structureValue').on('change', function(){ if($(this).val() != "z"){ arrOneSelected.push($(this).val()); } }) $("#firstButton").click(function() { if (arrOneSelected.length == (arrOne.length -1)) { $("#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); }) 

 body { background-color: cadetblue; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-size: 100% 100%; font: 13px Verdana; } 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; } 

 <!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="z">please select</option> <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="z">please select</option> <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>