2016-09-22 1 views
0

Ich habe ein Umfrageformular entwickelt, das 13 Fragen hat. Alle Fragen kommen nur auf einer Seite, aber ich möchte nur 3 Fragen auf einmal zeigen, dann andere 3 Fragen auf der nächsten Seite.Wie mache ich ein Formular, um 3 Fragen zu einer Zeit zu zeigen

Ich habe keine Ahnung, wie dies zu tun ist.Bitte helfen Sie mir in dieser Ausgabe. dank

+0

Wie wollen Sie die Menge von 3 Fragen zu machen - durch eine 'next' Schaltfläche klicken, oder mit' paging'? –

+0

Klicken Sie auf Weiter. es wäre toll, wenn Sie mir mit einem Beispielcode helfen würden. –

Antwort

0

Dieser Code nur drei Artikel zum Zeitpunkt zeigen, und zeigen nächsten drei Elemente, wenn klickte auf Weiter.

var currentPage = 0; 
var pages = 5; 
var itemsPerPage = 3; 
var $submitButton = $("button[type=submit]"); 
$("li h3").each(function(i, e){ 
    $(e).text((i + 1) + ") " + $(e).text()); 
}); 

$("#next").click(function() { 
    $("li") 
    //.css("background", "#FFF") 
    .hide(); 
    for(i = 1; i <= itemsPerPage; i++) { 
     $("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")") 
     //.css("background" , "red") 
     .show(); 
    } 
    if(currentPage == pages - 1) { 
     $submitButton.show(); 
    } else { 
     $submitButton.hide(); 
    } 
    if(currentPage < pages - 1) { 
    currentPage += 1; 
    } else { 
    currentPage = 0; 
    } 

}); 

$("#next").click(); 

Example on CodePen

+0

ist dies möglich, wenn Senden-Schaltfläche kam nur auf der letzten Seite –

+0

Siehe den Link. Ich habe dies auf dem Codepen implementiert. –

0

Mit CSS geprüft Selektor Registerkarten erstellen Behälter Hinweis: Eingang kurz vor div Container werden müssen

platziert
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Tabs</title> 
    <style type="text/css"> 
    input:checked + div {display:block;} 
    .nod{display: none;} 
    label{display:inline-grid; border: solid 2px black; } 
    </style> 
</head> 
<body> 
    <p>Select one section</p> 
    <label for="select1">Section 1</label> 
    <label for="select2">Section 2</label> 
    <label for="select3">Section 3</label> 
    <input type="radio" name="tab" id="select1" class="nod" checked="checked" /> 
    <div id="tab1" class="nod">Text of 1<br />bla bla bla ...</div> 
    <input type="radio" name="tab" id="select2" class="nod" /> 
    <div id="tab2" class="nod">Text of 2<br />ipsem something</div> 
    <input type="radio" name="tab" id="select3" class="nod" /> 
    <div id="tab3" class="nod">Text of 3<br />Eat that you can and can that you cannot</div> 
</body> 
</html> 
Verwandte Themen