✔ Eine if Abfrage, wenn eine Klasse existiert

lisali

lisali

Erfahrenes Mitglied
Hallo,

ich habe mit JQuery so ein Script, dass einen Div Container ein- und ausblendet. Bei einem Klick wird der Textlink auch umgeändert von "ausblenden" in "anzeigen".

Das klappt auch alles prima, aber ich möchte jetzt eine if-Bedingung hinzufügen, wenn die Klasse "dn" in diesem div-Container steht.

Also "dn" bedeutet bei mir in der CSS: dn { display: none; } ... sprich der Div-Container wird anfangs nicht angezeigt.

Ich möchte also nur, dass wenn ich "dn" im Container drin stehen habe, es sich genau umgekehrt verhält. Dass eben nicht zuerst "ausblenden", sondern "anzeigen" dort steht.

Das ist der Code:

Code: 
	$("a").click(hFn=function (){
  	var fn = hFn;
    var _this = this;
    $(this).unbind('click', fn);
    $("div#"+this.id+'_div').slideToggle("normal", function()
	{		
		var strSrc = strUpDown = "";
		if($(_this).find("img").attr("src").search(/arrow_up\.gif/)!=-1)
		{
		strSrc = "img/icons/arrow_down.gif";
		strUpDown = "anzeigen";
		}
		else
		{
		strSrc = "img/icons/arrow_up.gif";
		strUpDown = "ausblenden";
		}
		$(_this).find("img").attr({ src: strSrc }).fadeOut('normal').fadeIn('normal');
		$(_this).find("span").fadeOut('normal', function(){ $(_this).find("span").html(strUpDown); }).fadeIn('normal');
		$(_this).bind('click', fn);
		});	
	});

html:

HTML: 
<a id="toggle1" class="cp fr"><span>ausblenden</span> <img alt='' src="img/icons/arrow_up.gif" /></a>

<div id="toggle1_div" class="dn"> inhalt </div>
 
Hi,

du könntest das bestehende Script dahingehend erweitern, dass alle Links durchlaufen werden, geprüft wird, ob die Klasse im zugehörigen DIV enthalten ist und entsprechend die erforderlichen Änderungen vornehmen.
Code: 
$(function(){
$("a").click(hFn=function (){
    var fn = hFn;
    var _this = this;
    $(this).unbind('click', fn);
    $("div#"+this.id+'_div').slideToggle("normal", function()
	{		
		var strSrc = strUpDown = "";
		if($(_this).find("img").attr("src").search(/arrow_up\.gif/)!=-1)
		{
		strSrc = "img/icons/arrow_down.gif";
		strUpDown = "anzeigen";
		}
		else
		{
		strSrc = "img/icons/arrow_up.gif";
		strUpDown = "ausblenden";
		}
		$(_this).find("img").attr({ src: strSrc }).fadeOut('normal').fadeIn('normal');
		$(_this).find("span").fadeOut('normal', function(){ $(_this).find("span").html(strUpDown); }).fadeIn('normal');
		$(_this).bind('click', fn);
		});	
  }).each(function(i){
    if($('#'+$(this).attr("id")+'_div').hasClass('dn')){
      $(this).find("img").attr({ src: "img/icons/arrow_down.gif" });
      $(this).find("span").html("anzeigen");
      $('#'+$(this).attr("id")+'_div').hide();
    }
  });
});

Ciao
Quaese
 
Oh, dankeschön... das klappt prima!

Mir ist nur aufgefallen, dass der Anfangsstartwert erst geändert wird, nachdem die Seite komplett geladen ist. Wäre das jetzt zu viel Aufwand es so umzuändern, dass es direkt am Anfang schon prüft und so den Anfangsstartwert (anzeigen oder ausblenden) bestimmt?
 
Hi,

dann wirst du wohl kaum drum rumkommen, die gewünschten Inhalte ins Dokument einzutragen. Denn du hast erst nach dem Laden des DOM Zugriff auf dessen Elemente. Und da ist das erste Anzeigen bereits erfolgt.

Eine weitere Variante wäre, das Dokument erst nach dem Laden anzuzeigen.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('html:first').addClass('script_js');

$(function(){
  $("a").click(hFn=function (){
    var fn = hFn;
    var _this = this;
    $(this).unbind('click', fn);
    $("div#"+this.id+'_div').slideToggle("normal", function()
	{		
		var strSrc = strUpDown = "";
		if($(_this).find("img").attr("src").search(/arrow_up\.gif/)!=-1)
		{
		strSrc = "img/icons/arrow_down.gif";
		strUpDown = "anzeigen";
		}
		else
		{
		strSrc = "img/icons/arrow_up.gif";
		strUpDown = "ausblenden";
		}
		$(_this).find("img").attr({ src: strSrc }).fadeOut('normal').fadeIn('normal');
		$(_this).find("span").fadeOut('normal', function(){ $(_this).find("span").html(strUpDown); }).fadeIn('normal');
		$(_this).bind('click', fn);
		});	
  }).each(function(i){
    if($('#'+$(this).attr("id")+'_div').hasClass('dn')){
      $(this).find("img").attr({ src: "img/icons/arrow_down.gif" });
      $(this).find("span").html("anzeigen");
      $('#'+$(this).attr("id")+'_div').hide();
    }
  });

  $('body').show();
});
</script>
<style type="text/css">
<!--
.script_js .hide_body{
  display: none;
}
-->
</style>
</head>
<body class="hide_body">
<a id="toggle1" class="cp fr"><span>ausblenden</span> <img alt='' src="img/icons/arrow_up.gif" /></a>
<div id="toggle1_div"> inhalt </div>
<div>&nbsp;</div>
<a id="toggle1" class="cp fr"><span>ausblenden</span> <img alt='' src="img/icons/arrow_up.gif" /></a>
<div id="toggle1_div" class="dn"> inhalt </div>
</body>
</html>

Ciao
Quaese
 
Okay, ich verstehe!
Vielen Dank für deine Mühe!

Das weiß ich zu schätzen. Jetzt klappt es super. Danke!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück