JQuery кнопка onclick NEXT в форме

Question

Мне нужна помощь с моей формой. Мои знания о jQuery плохи, этот код ниже я нашел в google. Мне нужна форма, и я знаю, как создавать формы в HTML5 и CSS3, но я не знаю, как использовать опции HIDE и SHOW в jQuery и подключаться к кнопке NEXT.

Я хочу, чтобы это сделать https://s24.postimg.org/l8ogszanp/form.png

var step=1; 
 
    $("#next").on("click") 
 
    function{ 
 
    $("step"+step).hide(); 
 
    step+=1 
 
    $("steo"+step).show(); 
 
    }

.step1 { 
 
    display: block; 
 
    background-color: silver; 
 
    } 
 

 
    .step2 { 
 
    display: none; 
 
    background-color: yellow; 
 
    } 
 

 
    .step3 { 
 
    display: none; 
 
    background-color: green; 
 
    } 
 

 
    .step4 { 
 
    display: none; 
 
    background-color: red; 
 
    } 
 

 
    .step5 { 
 
    display: none; 
 
    background-color: blue; 
 
    }

<div class="container"> 
 
    <form> 
 
    <div class="step1"> 
 
    <p>Content 1</p> 
 
    <button id="next">NEXT</button> 
 
    </div> 
 

 
    <div class="step2"> 
 
    <p>Content 2</p> 
 
    <button id="next">NEXT</button> 
 
    </div> 
 

 
    <div class="step3"> 
 
    <p>Content 3</p> 
 
    <button id="next">NEXT</button> 
 
    </div> 
 

 
    <div class="step4"> 
 
    <p>Content 4</p> 
 
    <button id="next">NEXT</button> 
 
    </div> 
 

 
    <div class="step5"> 
 
    <p>Content 5</p> 
 
    <button id="next">NEXT</button> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

Похоже, вы пропустили точку.

function{ 
$(".step"+step).hide(); 
step+=1 
$(".step"+step).show(); 
} 

Answer 2

1. Вам не нужно, что много "следующей" кнопки. Для идентификаторов вы должны иметь только один на странице, и в этом случае его можно повторно использовать для каждого элемента.
2. Необходимо добавить индикатор класса в шаговые вызовы $(".step" + step)...
3. Код .on('click', function()... был неправильно сформирован.

Ниже приведенный ниже фрагмент поможет вам в правильном направлении двигаться вперед.

var step = 1; 
 
$("#next").on("click", function(e) { 
 
    e.preventDefault(); 
 
    $(".step" + step).hide(); 
 
    step+= 1; 
 
    $(".step" + step).show(); 
 
});

.step1 { 
 
    display: block; 
 
    background-color: silver; 
 
} 
 

 
.step2 { 
 
    display: none; 
 
    background-color: yellow; 
 
} 
 

 
.step3 { 
 
    display: none; 
 
    background-color: green; 
 
} 
 

 
.step4 { 
 
    display: none; 
 
    background-color: red; 
 
} 
 

 
.step5 { 
 
    display: none; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <form> 
 
    <div class="step1"> 
 
     <p>Content 1</p> 
 
    </div> 
 

 
    <div class="step2"> 
 
     <p>Content 2</p> 
 
    </div> 
 

 
    <div class="step3"> 
 
     <p>Content 3</p> 
 
    </div> 
 

 
    <div class="step4"> 
 
     <p>Content 4</p> 
 
    </div> 
 

 
    <div class="step5"> 
 
     <p>Content 5</p> 
 
    </div> 
 
    <button id="next">NEXT</button> 
 
    </form> 
 
</div>