我遇到以下代码的问题。这应该返回页面上具有id的部分，因此我可以删除id并将其提供给另一个不可见的部分，使新的部分可见。这些绑定到click事件处理程序。但是会发生的是，下一个窗口会出现几分之一秒然后消失。我需要它留下来，在下一次点击按钮时，下一部分应该出现等。 我相信它可能与循环有关，但我无法弄清楚是什么。我错过了什么？
编辑：我现在添加了所有HTML，CSS JS，所以一切都在那里。
JS
var sections = document.querySelectorAll("section");
var btns = document.querySelector("input[type='submit']");
//*
This part should switch to the next ingredient selection
*//
function next(){
var i=0;
while (i+1 <= sections.length) {
if (sections[i].hasAttribute ("id")) {
sections[i].removeAttribute("id");
i=i+1;
sections[i].setAttribute("id","visible");
break;
} }}
btns.addEventListener('click', next);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pete's Pizzeria</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Mr+Dafoe|Nothing+You+Could+Do|Yellowtail|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="mainh1">Pete's pizzeria</h1>
<main>
<section id="visible">
<header>
<h1>Choose your size!</h1>
</header>
<form>
<p>Personal<input type="radio" name="size" value="personal" checked><span class="price" data-price="6">$6.00</span> </p>
<p>Medium<input type="radio" name="size" value="medium"><span class="price" value=10>$10.00</span> </p>
<p>Large<input type="radio" name="size" value="large"><span class="price" data-price="14">$14.00</span></p>
<p>Extra Large <input type="radio" name="size" value="extralarge"><span class="price" data-price="16">$16.00</span></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>Nice to meat you!</h1>
<p>The first meat item is complimentary. All additional meat items cost $1 each.</p>
</header>
<form>
<p>Pepperoni<input type="checkbox" name="meat" value="pepperoni" checked></p>
<p>Sausage<input type="checkbox" name="meat" value="sausage" ></p>
<p>Canadian Bacon<input type="checkbox" name="meat" value="canadianBacon" ></p>
<p>Ground Beef <input type="checkbox" name="meat" value="groundBeef"></p>
<p>Anchovy <input type="checkbox" name="meat" value="anchovy"></p>
<p>Chicken <input type="checkbox" name="meat" value="chicken"></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>How cheesy<br>are you?</h1>
</header>
<form>
<p>Regular<input type="radio" name="cheese" value="regularcheese" checked></p>
<p>No cheese<input type="radio" name="cheese" value="nocheese" ></p>
<p>Extra Cheese <span data-price="3">(+$3.00)</span><input type="radio" name="cheese" value="extracheese"></p> <input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>Everyone bites<br>the crust</h1>
</header>
<form>
<p>Plain Crust<input type="radio" name="crust" value="plainCrust" checked></p>
<p>Garlic Butter Crust<input type="radio" name="crust" value="garlicButterCrust" ></p>
<p>Cheese Stuffed Crust <span data-price="3">(+$3.00)</span><input type="radio" name="crust" value="cheeseStuffedCrust" ></p>
<p>Spicy Crust<input type="radio" name="crust" value="spicyCrust"></p>
<p>House Special Crust<input type="radio" name="crust" value="houseSpecialCrust"></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>Our pizzas are saucy</h1>
</header>
<form>
<p>Marinara sauce<input type="radio" name="sauce" value="marinaraSauce" checked></p>
<p>White sauce<input type="radio" name="sauce" value="garlicButterCrust" ></p>
<p>Barbeque sauce<input type="radio" name="sauce" value="BBQsauce" ></p>
<p>No Sauce<input type="radio" name="sauce" value="noSauce"></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<form>
<header>
<h1>Always eat your veggies</h1>
The first type of veggie is complimentary. All additional veggie items cost $1 each.
</header>
<p>Tomatoes<input type="checkbox" name="veggies" value="tomatoes" checked></p>
<p>Onions<input type="checkbox" name="veggies" value="onions" ></p>
<p>Olives<input type="checkbox" name="veggies" value="olives" ></p>
<p>Green Peppers<input type="checkbox" name="veggies" value="greenPeppers"></p>
<p>Mushrooms<input type="checkbox" name="veggies" value="mushrooms"></p>
<p>Pineapple <input type="checkbox" name="veggies" value="pineapple"></p>
<p>Spinach <input type="checkbox" name="veggies" value="spinach"></p>
<p>Jalapeno <input type="checkbox" name="veggies" value="jalapeno"></p>
<input type="submit" value="Next">
</form>
</section>
<section id="tally">
<h1>The bottom line</h1>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
</section>
</main>
<script src="scripts.js"></script>
</body>
</html>
CSS
body {
margin: 0 0 auto auto;
background-image: url(images/food-pizza-box-chalkboard.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
font-family: 'Roboto', sans-serif;
}
/*
==============================================================
Pete's pizzera title
==============================================================
*/
#mainh1 {
font-family: 'Nothing You Could Do', cursive;
color: white;
position: absolute;
top: 2rem;
left: 3rem;
font-size: 2.5rem;
text-shadow: 1px 1px 2px #ffffff;
}
/*
==============================================================
The box with the content
==============================================================
*/
section {
background-color: rgba(255,255,255,0.5);
position: absolute;
top:0 0;
margin-left: 3rem;
margin-top: 8rem;
padding: 1.5rem;
border-radius: 15px;
border: 5px solid rgba(232, 232, 232,0.5);
width: 15rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
display: none;}
/*
==============================================================
The class that will hide all boxes unless the person clicks on next, in which case the next is going to appear.
==============================================================
*/
#visible {
display: block;
}
/*The title of the box*/
h1 {
font-family: 'Nothing You Could Do', cursive;
font-size: 1.7rem;
margin:0;
}
/*
==============================================================
aligning the check and radio buttons vertically
==============================================================
*/
input[type="checkbox"],input[type="radio"]{
display: inline-block;
position: absolute;
right: 1rem;
}
/*
==============================================================
aligning the prices vertically
==============================================================
*/
span {
display: inline-block;
position: absolute;
right: 4rem;
}
/*
==============================================================
line-spacing of paragraphs in the forms
==============================================================
*/
form p {
padding: 0;
margin: 0.5rem;
}
/*
==============================================================
Formatting of the "Next" button
==============================================================
*/
input[type="submit"] {
width: 100px;
margin-top: 25px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding: 0.25rem;
}
/*
==============================================================
The box with the content
==============================================================
*/
#tally {
background-color: rgba(255,255,255,0.7);
position: absolute;
top:0;
right: 15rem;
padding: 1.5rem;
border-radius: 15px;
border: 5px solid rgba(232, 232, 232,0.5);
width: 15rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5)
}
#tally h1 {
top: 2rem;
}
#tally p {
margin: 0.3rem;
}
答案 0 :(得分：1)
var btns = document.getElementsByClassName("submit");
//console.log(btns);
function next(){
var sections = document.getElementsByClassName('section-card');
//console.log(sections);
for(var i = 0; i < sections.length - 1; i++){
if (sections[i].classList.contains('visible')) {
//sections[i].removeAttribute("id");
sections[i].classList.remove('visible');
//sections[i].setAttribute("id","visible");
sections[i+1].classList.add('visible');
break;
} }}
for(var i = 0; i < btns.length; i++){
btns[i].addEventListener('click', next);
}body {
margin: 0 0 auto auto;
background-image: url(images/food-pizza-box-chalkboard.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
font-family: 'Roboto', sans-serif;
}
/*
==============================================================
Pete's pizzera title
==============================================================
*/
#mainh1 {
font-family: 'Nothing You Could Do', cursive;
color: white;
position: absolute;
top: 2rem;
left: 3rem;
font-size: 2.5rem;
text-shadow: 1px 1px 2px #ffffff;
}
/*
==============================================================
The box with the content
==============================================================
*/
.section-card {
background-color: rgba(255,255,255,0.5);
position: absolute;
top:0 0;
margin-left: 3rem;
margin-top: 8rem;
padding: 1.5rem;
border-radius: 15px;
border: 5px solid rgba(232, 232, 232,0.5);
width: 15rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
display: none;}
/*
==============================================================
The class that will hide all boxes unless the person clicks on next, in which case the next is going to appear.
==============================================================
*/
.section-card.visible{
background-color: rgba(255,255,255,0.5);
position: absolute;
top:0 0;
margin-left: 3rem;
margin-top: 8rem;
padding: 1.5rem;
border-radius: 15px;
border: 5px solid rgba(232, 232, 232,0.5);
width: 15rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
display: block;}
}
/*The title of the box*/
h1 {
font-family: 'Nothing You Could Do', cursive;
font-size: 1.7rem;
margin:0;
}
/*
==============================================================
aligning the check and radio buttons vertically
==============================================================
*/
input[type="checkbox"],input[type="radio"]{
display: inline-block;
position: absolute;
right: 1rem;
}
/*
==============================================================
aligning the prices vertically
==============================================================
*/
span {
display: inline-block;
position: absolute;
right: 4rem;
}
/*
==============================================================
line-spacing of paragraphs in the forms
==============================================================
*/
form p {
padding: 0;
margin: 0.5rem;
}
/*
==============================================================
Formatting of the "Next" button
==============================================================
*/
.submit {
width: 100px;
margin-top: 25px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding: 0.25rem;
}
/*
==============================================================
The box with the content
==============================================================
*/
#tally {
background-color: rgba(255,255,255,0.7);
position: absolute;
top:0;
right: 15rem;
padding: 1.5rem;
border-radius: 15px;
border: 5px solid rgba(232, 232, 232,0.5);
width: 15rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5)
}
#tally h1 {
top: 2rem;
}
#tally p {
margin: 0.3rem;
} <h1 id="mainh1">Pete's pizzeria</h1>
<main>
<div class="section-card visible">
<header>
<h1>Choose your size!</h1>
</header>
<p>Personal<input type="radio" name="size" value="personal" checked><span class="price" data-price="6">$6.00</span> </p>
<p>Medium<input type="radio" name="size" value="medium"><span class="price" value=10>$10.00</span> </p>
<p>Large<input type="radio" name="size" value="large"><span class="price" data-price="14">$14.00</span></p>
<p>Extra Large <input type="radio" name="size" value="extralarge"><span class="price" data-price="16">$16.00</span></p>
<button class="submit">Next</button>
</div>
<div class="section-card">
<header>
<h1>Nice to meat you!</h1>
<p>The first meat item is complimentary. All additional meat items cost $1 each.</p>
</header>
<p>Pepperoni<input type="checkbox" name="meat" value="pepperoni" checked></p>
<p>Sausage<input type="checkbox" name="meat" value="sausage" ></p>
<p>Canadian Bacon<input type="checkbox" name="meat" value="canadianBacon" ></p>
<p>Ground Beef <input type="checkbox" name="meat" value="groundBeef"></p>
<p>Anchovy <input type="checkbox" name="meat" value="anchovy"></p>
<p>Chicken <input type="checkbox" name="meat" value="chicken"></p>
<button class="submit">Next</button>
</div>
<div class="section-card">
<header>
<h1>How cheesy<br>are you?</h1>
</header>
<p>Regular<input type="radio" name="cheese" value="regularcheese" checked></p>
<p>No cheese<input type="radio" name="cheese" value="nocheese" ></p>
<p>Extra Cheese <span data-price="3">(+$3.00)</span><input type="radio" name="cheese" value="extracheese"></p>
<button class="submit">Next</button>
</div>
<div class="section-card">
<header>
<h1>Everyone bites<br>the crust</h1>
</header>
<p>Plain Crust<input type="radio" name="crust" value="plainCrust" checked></p>
<p>Garlic Butter Crust<input type="radio" name="crust" value="garlicButterCrust" ></p>
<p>Cheese Stuffed Crust <span data-price="3">(+$3.00)</span><input type="radio" name="crust" value="cheeseStuffedCrust" ></p>
<p>Spicy Crust<input type="radio" name="crust" value="spicyCrust"></p>
<p>House Special Crust<input type="radio" name="crust" value="houseSpecialCrust"></p>
<button class="submit">Next</button>
</div>
<div class="section-card">
<header>
<h1>Our pizzas are saucy</h1>
</header>
<p>Marinara sauce<input type="radio" name="sauce" value="marinaraSauce" checked></p>
<p>White sauce<input type="radio" name="sauce" value="garlicButterCrust" ></p>
<p>Barbeque sauce<input type="radio" name="sauce" value="BBQsauce" ></p>
<p>No Sauce<input type="radio" name="sauce" value="noSauce"></p>
<button class="submit">Next</button>
</div>
<div class="section-card">
<header>
<h1>Always eat your veggies</h1>
The first type of veggie is complimentary. All additional veggie items cost $1 each.
</header>
<p>Tomatoes<input type="checkbox" name="veggies" value="tomatoes" checked></p>
<p>Onions<input type="checkbox" name="veggies" value="onions" ></p>
<p>Olives<input type="checkbox" name="veggies" value="olives" ></p>
<p>Green Peppers<input type="checkbox" name="veggies" value="greenPeppers"></p>
<p>Mushrooms<input type="checkbox" name="veggies" value="mushrooms"></p>
<p>Pineapple <input type="checkbox" name="veggies" value="pineapple"></p>
<p>Spinach <input type="checkbox" name="veggies" value="spinach"></p>
<p>Jalapeno <input type="checkbox" name="veggies" value="jalapeno"></p>
<button class="submit">Next</button>
</div>
<div id="tally">
<h1>The bottom line</h1>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
</div>
</main>
没有JQuery更新
以下是在按钮点击时隐藏和显示元素的基本示例。我利用不透明度进行过渡。如果你只想要简单的显示/隐藏，你可以使用display：block和display：none。
NEW UPDATE :(基于发布的整个代码） 首先，您的表单存在问题。它在单击下一步时出错（这就是你的部分消失的原因）因为它想要一个POST请求。我将这些部分更改为div，删除了表单，并将输入更改为。
你的while语句有一个潜在的无限循环，如果永远不输入if语句，你的循环永远不会停止，改为for循环以确保它会停止。
您没有在下一次按钮单击时再次抓取这些部分（这会导致上面提到的无限循环，因为没有部分具有可见ID）。现在，每次单击按钮时都会抓取这些部分。
更改了您的移除并添加了“ID＆＃39;删除和添加一个类。再次强烈建议不要基于删除和添加ID来改变css ....
你也没有将click事件绑定到每个按钮，只是第一个按钮，for循环通过按钮现在将click事件绑定到所有按钮。如果您现在运行我的示例，它会遍历您的所有卡片。