Hilfe bei JavaScript

[Camping_RIDER]

Aloha ;)

Ich habe jetzt elf Text-Seiten eingestellt. Natürlich bläht sich das Script mit jeder Seite auf, aber für meine Zwecke benötige ich eigentlich nie mehr als zehn Text-Seiten. Es gibt bestimmt noch eine Möglichkeit, diesen Teil des Codes dynamisch zu machen, damit man nicht für jede Text-Seite einen if-Eintrag benötigt, aber leider ist mir nicht bekannt, wie das geht.

Ganz einfach: überall wo in deinem Code zigmal hintereinander das gleiche passiert mit nur marginalen Unterschieden (z.B. in der id) kannst du optimieren. Beispielsweise:

var pageNumber = 1;

var previousPage = document.getElementById("previous_page");

var nextPage = document.getElementById("next_page");

previousPage.addEventListener("click", function(){

  if ( pageNumber == 1 ) { return false; }

  else if ( pageNumber == 2 ) {
  	$("input#previous_page").hide();
  	$("img#previous_page-disabled").show();
  	$("#text_page_02").hide();
  	$("#text_page_01").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 3) {
  	$("#text_page_03").hide();
  	$("#text_page_02").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 4) {
  	$("#text_page_04").hide();
  	$("#text_page_03").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 5) {
  	$("#text_page_05").hide();
  	$("#text_page_04").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 6) {
  	$("#text_page_06").hide();
  	$("#text_page_05").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 7) {
  	$("#text_page_07").hide();
  	$("#text_page_06").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 8) {
  	$("#text_page_08").hide();
  	$("#text_page_07").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 9) {
  	$("#text_page_09").hide();
  	$("#text_page_08").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

  else if ( pageNumber == 10) {
  	$("#text_page_10").hide();
  	$("#text_page_09").fadeIn(600);
  	pageNumber--;
  	document.querySelector('#pageNumber').textContent = pageNumber;
  }

});

wird zu:

var pageNumber = 1;

var previousPage = document.getElementById("previous_page");

var nextPage = document.getElementById("next_page");

var lastPage = 10; // das möchtest du vielleicht auch irgendwann dann dynamisch ermitteln

previousPage.addEventListener("click", function(){

        // spezielle Aktion - bleibt einzeln:
	if ( pageNumber == 1 ) { return false; }

        // spezielle Aktion - bleibt einzeln:
	else if ( pageNumber == 2 ) {
		$("input#previous_page").hide();
		$("img#previous_page-disabled").show();
		$("#text_page_02").hide();
		$("#text_page_01").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

        // ab hier passiert immer das Gleiche - zusammenfassen:
	else if ( pageNumber >= 3 && pageNumber <= lastPage) {
		$("#text_page_"+(((pageNumber) < 10)?"0"+pageNumber:pageNumber)).hide();
		$("#text_page_"+(((pageNumber-1) < 10)?"0"+(pageNumber-1):(pageNumber-1))).fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}
});

Der Block

((pageNumber) < 10)?"0"+pageNumber:pageNumber)

tut nichts anderes als entweder die pageNumber liefern oder, falls sie kleiner als 10 ist, die pageNumber mit führender Null liefern.

Ich würde dir allerdings hier wärmstens empfehlen, das Code Design zu ändern und statt #text_page_01, ..., #text_page_09, #text_page_10, ... ein #text_page_1, #text_page_2, ... #text_page_9, #text_page_10, ... zu verwenden. Die einzelne führende Null bei Zahlen unter 10 bedeutet nur Zusatzaufwand und schlechte Robustheit (was, wenn du das mal wo verwenden willst, wo es mehr als 99 Seiten gibt?). Wenn du das änderst wird dein Code noch einfacher. Zusätzlich kann man sogar einen Teil der Aktionen bei pageNumber == 2 mit in die Zusammenfassung nehmen:

var pageNumber = 1;

var previousPage = document.getElementById("previous_page");

var nextPage = document.getElementById("next_page");

var lastPage = 10; // das möchtest du vielleicht auch irgendwann dann dynamisch ermitteln

previousPage.addEventListener("click", function(){

        // ganz spezielle Aktion - bleibt auf jeden Fall einzeln:
	if ( pageNumber == 1 ) { return false; }

        // ab hier passiert immer das Gleiche - zusammenfassen:
	else if ( pageNumber >= 2 && pageNumber <= lastPage) {

                // Spezialaktion für pageNumber == 2
                if (pageNumber == 2) {
                    $("input#previous_page").hide();
		    $("img#previous_page-disabled").show();
                }

		$("#text_page_"+pageNumber).hide();
		$("#text_page_"+(pageNumber-1)).fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}
});

Grüße,

RIDER