swapContainer - Funktion

[Carrear]

Hi Leute,

ich habe eine Funktion, welche im Wesentlichen eines von 5 Objekten sichtbar und die anderen unsichtbar machen soll. Klappt soweit auch, insofern ich es manuell steuer. Also per Klick auf eine Seitenzahl findet eine JS Abfrage via JQuery statt, welche dann den entsprechenden Elementen die css Eigenschaft display: block oder eben display: none gibt.
Zusätzlich zu der manuellen Steuerung soll das ganze jetzt auch automatisch funktionieren - alle 5 Sekunden soll ein anderer Container angezeigt werden. Dafür habe ich eine Funktion gebaut:

<script type="text/javascript" >
function swapContainer(){
      if (#first.css('display') == 'block') {
		$('#first').css('display', 'block');
		$('#second').css('display', 'none');
		$('#third').css('display', 'none');
		$('#fourth').css('display', 'none');
		$('#fivth').css('display', 'none');
	} else if (#first.css('display') == 'inline') {
		$('#first').css('display', 'block');
		$('#second').css('display', 'none');
		$('#third').css('display', 'none');
		$('#fourth').css('display', 'none');
		$('#fivth').css('display', 'none');
	} else if (#second.css('display') == 'block') {
		$('#first').css('display', 'none');
		$('#second').css('display', 'block');
		$('#third').css('display', 'none');
		$('#fourth').css('display', 'none');
		$('#fivth').css('display', 'none');
	} else if (#third.css('display') == 'block') {
		$('#first').css('display', 'none');
		$('#second').css('display', 'none');
		$('#third').css('display', 'block');
		$('#fourth').css('display', 'none');
		$('#fivth').css('display', 'none');
	} else if (#fourth.css('display') == 'block') {
		$('#first').css('display', 'none');
		$('#second').css('display', 'none');
		$('#third').css('display', 'none');
		$('#fourth').css('display', 'block');
		$('#fivth').css('display', 'none');
	} else if (#fivth.css('display') == 'block') {
		$('#first').css('display', 'none');
		$('#second').css('display', 'none');
		$('#third').css('display', 'none');
		$('#fourth').css('display', 'none');
		$('#fivth').css('display', 'block');
	} else { }

	});	
      });
$(document).ready(function(){
      setInterval('swapContainer()', 5000);
});
</script>

So ist das in den Head Bereich eingebaut. Aber es funktioniert nicht. Habe ich etwas falsch gemacht?

 

[CPoly]

Bevor du damit weiter machst, solltest du jQuery entweder rauswerfen oder es lernen. Das lässt sich mit jQuery mit viel weniger Code lösen.


Aber zu deinem Problem:
Jeder Browser hat eine Fehlerkonsole. Weil auf den ersten Blick ist das kein gültiges JavaScript:

if (#first.css('display') == 'block') {

Was soll "#first" sein?

 

[Parantatatam]

Das ist syntaktisch inkorrekt:

function swapContainer() {
  if($('#first').css('display') == 'block') {
    $('#first').css('display', 'block');
    $('#second').css('display', 'none');
    $('#third').css('display', 'none');
    $('#fourth').css('display', 'none');
    $('#fivth').css('display', 'none');
  } else if ($('#first').css('display') == 'inline') {
    $('#first').css('display', 'block');
    $('#second').css('display', 'none');
    $('#third').css('display', 'none');
    $('#fourth').css('display', 'none');
    $('#fivth').css('display', 'none');
  } else if ($('#second').css('display') == 'block') {
    $('#first').css('display', 'none');
    $('#second').css('display', 'block');
    $('#third').css('display', 'none');
    $('#fourth').css('display', 'none');
    $('#fivth').css('display', 'none');
  } else if ($('#third').css('display') == 'block') {
    $('#first').css('display', 'none');
    $('#second').css('display', 'none');
    $('#third').css('display', 'block');
    $('#fourth').css('display', 'none');
    $('#fivth').css('display', 'none');
  } else if ($('#fourth').css('display') == 'block') {
    $('#first').css('display', 'none');
    $('#second').css('display', 'none');
    $('#third').css('display', 'none');
    $('#fourth').css('display', 'block');
    $('#fivth').css('display', 'none');
  } else if ($('#fivth').css('display') == 'block') {
    $('#first').css('display', 'none');
    $('#second').css('display', 'none');
    $('#third').css('display', 'none');
    $('#fourth').css('display', 'none');
    $('#fivth').css('display', 'block');
  }
}
$(document).ready(function() {
  setInterval('swapContainer()', 5000);
});

Du kannst das Ganze aber auch noch kürzen:

function swapContainer() {
  var elements = [
    $('#first'),
    $('#second'),
    $('#third'),
    $('#fourth'),
    $('#fivth')
  ];
  
  for(var pos = 0; pos < elements.length; ++pos) {
    if((elements[pos].css('display') == 'block') || ((pos == 0) && (elements[pos].css('display') == 'inline'))) {
      break;
    }
  }
  
  for(var i = 0; i < elements.length; ++i) {
    elements[i].css('display', 'none');
  }
  
  elements[pos].css('display', 'block');
}
$(document).ready(function() {
  setInterval('swapContainer()', 5000);
});

 

[CPoly]

Hier dann noch die verkürzte jQuery Version: http://jsfiddle.net/xbFM2/

 

[Carrear]

Nur lustig, dass es bei der manuellen Steuerung funktioniert. Da ich learning by doing betreibe und nur wenn etwas nicht funktioniert nachlese (ob das nun toll ist oder nicht ist eine andere Sache) bin ich davon ausgegangen, dass es richtig ist, da es funktionierte. Was ist denn daran syntaktisch inkorrekt ? Wäre nett wenn ich aufgeklärt werde.

 

[CPoly]

Was ist denn daran syntaktisch inkorrekt ?

Firefox bringt es auf den Punkt. Vergleich die Stelle mal mit der verbesserten Version von einfach nur crack

 

[Carrear]

Klappt übrigens auch nicht ^^ hängt sicher an dem anderen Code zur manuellen Steuerung, aber den Poste ich euch lieber nicht, sonst tickt ihr am anderen Ende der Leitung sicher noch ab

EDIT: Wie als Selektor ist kein ID-Selektor erlaubt XD !? Wie soll ich die Elemente denn sonst eindeutig ansprechen Außerdem erlaubt hin oder her, die Ansprache bestimmter Elemente über dieses wohl offensichtlich ungültige Zeichen funktioniert, da bin ich mir sicher, da ich es nutze. Aber gut, was ist die Alternative?

 

[Parantatatam]

Der ID-Selektor ist schon erlaubt, allerdings musst du den als Zeichenkette an eine Funktion übergeben. Er ist in dieser Form kein Bestandteil von Javascript.

 

[Carrear]

hm. das ist ja doof. wer denkt sich sowas aus? Ist doch praktisch dachte ich mir. Entspricht nicht meiner Logik, aber deswegen bin ICH ja auch kein Experte dafür Hauptsache es funktioniert ... was es ja aktuell nicht tut

wie sagt man das denn sonst

#container1.css('display') == 'block' - Ich meine wenn ich mir das anschaue sieht das für mich logisch aus. Für mich ist es als ob ich da nen Satz lese. Wähle Container 1 aus und checke dessen css Attributwert für display und überprüfe dann ob dieser dem Wert block entspricht. Warum ist das falsch. Ich verstehe das nicht und wüsste auch nicht wie ich das anders machen sollte.

 

[Parantatatam]

Magst du uns sagen, was genau nicht funktioniert?