1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Jquery problem

Discussion in 'General Scripting Chat' started by Setox, Oct 10, 2015.

  1. Setox

    Setox Power Member

    Joined:
    Apr 30, 2015
    Messages:
    581
    Likes Received:
    243
    Occupation:
    CPA Hunting
    Location:
    MALTA MAYBE ..
    Hello guys ,

    I'm trying to build a simple divs show&hide using jquey . (Like what used on quiz) , where it show the first div (question1) then the user click a button to go to next question & a previous button to back , the problem i have now is that i need a way to make a stop point (last question or a last div with a message) & on that point the button will be hidden . Another thing is that i want that when clicking the previous button it will stop on the first question .

    Thanks in advance guys ; & i'll appreciate any help on improving this like new code or something like that .

    this is the code i'm using right now :

    HTML
    Code:
    <div class="divs">
         <div class="cls1">1</div>
         <div class="cls2">2</div>
         <div class="cls3">3</div>
         <div class="cls4">4</div>
         <div class="cls5">5</div>
         <div class="cls6">6</div>
         <div class="cls7">7</div>
     </div>
     <a id="next">next</a>
     <a id="prev">prev</a>
    Jquery
    Code:
    $(document).ready(function(){
        $(".divs div").each(function(e) {
            if (e != 0)
                $(this).hide();
        });
    
        $("#next").click(function(){
            if ($(".divs div:visible").next().length != 0)
                $(".divs div:visible").next().show().prev().hide();
            else {
                $(".divs div:visible").hide();
                $(".divs div:first").show();
            }
            return false;
        });
    
        $("#prev").click(function(){
            if ($(".divs div:visible").prev().length != 0)
                $(".divs div:visible").prev().show().next().hide();
            else {
                $(".divs div:visible").hide();
                $(".divs div:last").show();
            }
            return false;
        });
    });
    
     
  2. MrBlue

    MrBlue Senior Member

    Joined:
    Dec 18, 2009
    Messages:
    974
    Likes Received:
    680
    Occupation:
    Web/Bot Developer
    Try this:

    jQuery
    Code:
    $(document).ready(function(){
    
    
        $(".divs div").each(function(e) {
            if (e != 0)
                $(this).hide();
        });
    
    
        $("#next").click(function(){
            if ($(".divs div:visible").text() < $(".divs div").size()) {
                if ($(".divs div:visible").next().length != 0)
                    $(".divs div:visible").next().show().prev().hide();
                else {
                    $(".divs div:visible").hide();
                    $(".divs div:first").show();
                }
            }
            return false;
        });
    
    
        $("#prev").click(function(){
            if ($(".divs div:visible").text() > 1) {
                if ($(".divs div:visible").prev().length != 0)
                    $(".divs div:visible").prev().show().next().hide();
                else {
                    $(".divs div:visible").hide();
                    $(".divs div:last").show();
                }
            }
            return false;
        });
    
    });
    
     
    • Thanks Thanks x 1
  3. Setox

    Setox Power Member

    Joined:
    Apr 30, 2015
    Messages:
    581
    Likes Received:
    243
    Occupation:
    CPA Hunting
    Location:
    MALTA MAYBE ..
    Thank you , this resolve the problem for the prev button so it stop on the first div and also for the next button stop on the last div ! altough i've already created a solution to match my needs but i think it require a lot of codes !

    Code:
    var x = document.getElementById("myBtn");
    x.addEventListener("click", myFunction);
    x.addEventListener("click", someOtherFunction);
    
    function myFunction() {
        document.getElementById('quest1').style.display='none';
    }
    
    function someOtherFunction() {
        document.getElementById('quest2').style.display='block';
    }
    var y = document.getElementById("myBtn2");
    y.addEventListener("click", myFunction2);
    y.addEventListener("click", someOtherFunction2);
    
    function myFunction2() {
        document.getElementById('quest2').style.display='none';
    }
    
    function someOtherFunction2() {
        document.getElementById('quest3').style.display='block';
    }
    & i keep adding variables & functions , there is no prev buttons just next and the last div is for the result ! Also this is some solutions i got when i posted my problem on Stackoverflaw :
    Code:
    https://stackoverflow.com/questions/33057285/jquery-hide-show-to-build-quiz
    i didn't try the solutions yet ,

    Thank you so much for your time & effort !

    Update : the solution on the stackoverflow site work as a charm !: lol
     
    Last edited: Oct 16, 2015