Jquery - Dalej

Question

$(document).ready(function(){
	
	var Tekst1 = "tekst1";
	var Tekst2 = "tekst2";
	var Tekst3 = "tekst3";
	var Tekst4 = "tekst4";
	
	var klik1 = 1;
	var klik2 = 0;
	var klik3 = 0;
	var klik4 = 0;
	
	$("#tresc").text(Tekst1);
	klik1 = true;
	
    $("#1").click(function(){
		klik1 = 0;
		klik2 = 1;
		$("#tresc").hide();
    	$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst1);
    });
    
        $("#2").click(function(){
		klik2 = 0;
		klik3 = 1;
		$("#tresc").hide();
		$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst2);
    });
	
	    $("#3").click(function(){
		klik3 = 0;
		klik4 = 1;
		$("#tresc").hide();
    	$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst3);
    });
	
	    $("#4").click(function(){
		klik4 = 0;
		klik1 = 1;
		$("#tresc").hide();
    	$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst4);
    });
	
		
		
		
		
		$( ".dalej" ).click(function() {
		
		if(klik1 == 1){
		klik1 = 0;
		klik2 = 1;
		$("#tresc").hide();
		$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst2);
		}
		
		else if(klik2 == 1){
		klik3 = 1;
		klik2 = 0;
		$("#tresc").hide();
    	$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst3);
		}
		
		else if(klik3 == 1){
		klik3 = 0;
		klik4 = 1;
		$("#tresc").hide();
    	$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst4);
		}
		
		else if(klik4 == 1){
		klik4 = 0;
		klik1 = 1;
		$("#tresc").hide();
    	$("#tresc").fadeIn("slow");
        $("#tresc").text(Tekst1);
		}
		else{
		$("#tresc").text("ERROR");
		}
		});
	
});

Posiadam taki kod. Już tłumaczę o co mi chodzi. Mam menu w którym każdy li ma kolejno id:1,2,3,4. Mam też przycisk dalej. Przyciski menu normalnie działają, lecz przycisk dalej działa jak chce. Klikam 1 i klikam dalej to przechodzi od razu do 3. Klikam 2 to przechodzi na 4. Jak klikam dalej działa to bez problemu czyli jak się nie przejmuje to jedzie po kolei.

Comments

Panie co tu się dzieje. Daj ten kod na codepen.

Answer 1

Wystarczy dopasować do swoich upodobań:

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

$(document).ready(function() {
            var counter = 1;
            $('#1').show();
            $("#dalej").click(function() {
                counter +=1;
                dalej();
            });
            function dalej(){
            switch (counter) {
                case 1:
                    $('.guzik').hide();
                    $('#1').show();
                    break;
                case 2:
                    $('.guzik').hide();
                    $('#2').show();
                    break;
                case 3:
                    $('.guzik').hide();
                    $('#3').show();
                    break;
                case 4:
                    $('.guzik').hide();
                    $('#4').show();
                    break;
                case 5:
                    $('.guzik').hide();
                    $('#5').show();
                    break
                    case 6:
                    $('.guzik').hide();
                    $('#1').show();
                    counter =1;
            }
            }
        });

Odnosząc się stricte do twojego kodu, strasznie wszystko pomieszałeś :

$(document).ready(function() {
            var klik = 1,
                tresc = $('#tresc'),
                Tekst1 = "tekst1",
                Tekst2 = "tekst2",
                Tekst3 = "tekst3",
                Tekst4 = "tekst4";

            tresc.text(Tekst1);

            $("#1").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst1);
                });
                klik = 1;
            });

            $("#2").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst2);
                });

                klik = 2;
            });

            $("#3").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst3);
                });
                klik = 3;
            });

            $("#4").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst4);
                });
                klik = 4;
            });

            $(".dalej").click(function() {
                klik += 1;
                dalej();
            });

            function dalej() {
                switch (klik) {
                    case 1:
                        tresc.hide(function() {
                            tresc.fadeIn('slow').text(Tekst1);
                        });
                        break;
                    case 2:
                        tresc.hide(function() {
                            tresc.fadeIn('slow').text(Tekst2);
                        });
                        break;
                    case 3:
                        tresc.hide(function() {
                            tresc.fadeIn('slow').text(Tekst3);
                        });
                        break;
                    case 4:
                        tresc.hide(function() {
                            tresc.fadeIn('slow').text(Tekst4);
                        });
                        break;
                    case 5:
                        tresc.hide(function() {
                            tresc.fadeIn('slow').text(Tekst1);
                        });
                        klik = 1;
                        break;
                }
            }
        });

edit:

ps. To hide i fadeIn kompletnie niepotrzebne :) Mam nadzieję, że pomogłem 

edit2:

Można też wpisać teksty do tablicy - skróci to nieco kod przycisku dalej:

$(document).ready(function() {
            var klik = 0,
                tresc = $('#tresc'),
                Tekst = ["tekst1",
                    "tekst2",
                    "tekst3",
                    "tekst4"
                ];

            tresc.text(Tekst[0]);

            $(".button").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst[0]);
                });
                klik = 0;
            });

            $("#2").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst[1]);
                });

                klik = 1;
            });

            $("#3").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst[2]);
                });
                klik = 2;
            });

            $("#4").click(function() {
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst[3]);
                });
                klik = 3;
            });

            $(".dalej").click(function() {
                klik += 1;
                dalej();
            });

            function dalej() {
                if (klik == 4) {
                    klik = 0;
                }
                tresc.hide(function() {
                    tresc.fadeIn('slow').text(Tekst[klik]);
                });
            }
        });

Fajny przykład do nauki. Dzięki za zabawę :D 

Comments

O DRY to chyba żaden z Was nie słyszał.