[GELÖST] Div ein- und ausblenden mit Javascript (display="none" -> display="block")

[kkapsner]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

und das ist mein Link:

<a href="javascript:Aendern3()" class="plugin-filter" data-filter="contemp">LINK3</a>

$(".plugin-filter").click(function(){return!1});

im unteren Teil ist der Plug-in Filter zu finden.

So für alle: <a href="javascript:..."> erzeugt hier das komplette Problem. Auf den ".plugin-filter" wird ein Eventlistener registriert, der die Defaultaktion unterdrückt (das return!1, was in echt ein return false ist). Da aber die JS-Funktionalität über das href mit dem "javascript:"-Protokoll gebunden wurde, ist diese Funktionalität die Defaultaktion und wird unterdrückt. Sowas passiert nicht, wenn man onclick verwendet.

Was lernen wir daraus: href ist nur für URLs und onclick für JS.

Dann musst du Neu aber als Array deklarieren.

VAR Neu=[ ];

und über

Neu[1] = "";

befüllen.

Das Befüllen kann man auch gleich in die Deklaration reinschreiben. Macht das Ganze, meiner Meinung nach, übersichtlicher.

 

[dbarthel]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Das Befüllen kann man auch gleich in die Deklaration reinschreiben. Macht das Ganze, meiner Meinung nach, übersichtlicher.

In dem Fall finde ich nicht, das dass das Ganze übersichtlicher macht.
Der Inhalt der einzelnen Einträge ist doch etwas komplexer, so das ich es extern eigentlich übersichtlicher finde.

Neu[1] =  "<h4 class=\"line-divider\">1</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>"; 
Neu[2] =  "<h4 class=\"line-divider\">2</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>";

statt

VAR Neu=["<h4 class=\"line-divider\">1</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>","<h4 class=\"line-divider\">2</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>"]

 

[miniA4kuser]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Ich denke mal das eher sowas gemeint war, sofern man Wert auf eine ordentliche Codeformatierung legt:

var Neu = [
	"<h4 class=\"line-divider\">1</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>",
	"<h4 class=\"line-divider\">2</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>"
];

Wobei ich das Escapen des " noch viel störender empfinde, daher:

vat Neu = [
	'<h4 class="line-divider">1</h4><h1>WHAT WE DO</h1><div class="row"><div class="span8 offset2"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>',
	'<h4 class="line-divider">2</h4><h1>WHAT WE DO</h1><div class="row"><div class="span8 offset2"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>'
];

Für lange Texte (HTML-Codeverschachtelungen) finde ich auch folgende Variante ganz nett, da man hier, bei Verwendung eines entsprechenden Editors, auch leich sehen kann, ob die verwendeten HTML-Tags matchen:

var Neu = [
	[
		'<h4 class="line-divider">1</h4>',
		'<h1>WHAT WE DO</h1>',
		'<div class="row">',
		'<div class="span8 offset2">',
		'<p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p>',
		'</div>',
		'</div>'
	].join(''),
	[
		'<h4 class="line-divider">2</h4>',
		'<h1>WHAT WE DO</h1>',
		'<div class="row">',
		'<div class="span8 offset2">',
		'<p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p>',
		'</div>',
		'</div>'
	].join('')
];

 

[kkapsner]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Ich denke mal das eher sowas gemeint war

Exakt.

folgende Variante ganz nett

Warum "belastest" du den JS-Client mit dem .join()? Du kannst das doch auch gleich so schreiben:

var neu = [
	'<h4 class="line-divider">1</h4>' +
	'<h1>WHAT WE DO</h1>' +
	'<div class="row">' +
		'<div class="span8 offset2">' +
			'<p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p>' +
		'</div>' +
	'</div>',
	'<h4 class="line-divider">2</h4>' +
	'<h1>WHAT WE DO</h1>' +
	'<div class="row">' +
		'<div class="span8 offset2">' +
			'<p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p>' +
		'</div>' +
	'</div>'
];

finde ich jetzt genauso gut lesbar.

Wobei ich da ja komplett gar kein HTML speichern würde, sondern nur die Daten:

var neu = [
	{
		divider: 1,
		header: "WHAT WE DO",
		text: "Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung."
	},
	{
		divider: 2,
		header: "WHAT WE DO",
		text: "Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung."
	}
];

und dann bei dem Code, der das Ganze einfügt, das HTML erst zusammenbauen. Dadurch hat man viel mehr Flexibilität (wenn sich z.B. das HTML-Grundgerüst mal ändern soll/muss, muss man das nur an einer Stelle ändern) und trennt Inhalt und Darstellung.

 

[miniA4kuser]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Warum "belastest" du den JS-Client mit dem .join()? Du kannst das doch auch gleich so schreiben: ...

Vor laaanger Zeit hatte ich die Erfahrung gemacht, das diese Methode bei großen bzw. vielen Zeichenkettenteilen schneller ist. Bei den heute ausgereifteren JavaScript-Engines spielt das aber mit Sicherheit keine Rolle mehr.

Wobei ich da ja komplett gar kein HTML speichern würde, sondern nur die Daten: ...

Das ist natürlich auch eine klasse Idee.

 

[LikeStar]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")



Kaum bin ich weg und auf einmal summieren sich die Beiträge, fast schon stappelweise:

Wie schon Jmd. geschrieben hat, wir haben es mit onclick hingekriegt.

<a href="#" onClick="javascript:Aendern1()" class="plugin-filter" data-filter="beispiel" >Link</a>

 

[dbarthel]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Na Hauptsache es klappt.

 

[j-l-n]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

<a href="#" onClick="javascript:Aendern1()" class="plugin-filter" data-filter="beispiel" >Link</a>

Wie dich auch kkapsner bereits darauf hingewiesen hat ist href="#" Unsinn und javascript: im onclick wird ersatzlos weggelassen.
Weiteres: What Are HTML5 Placeholder Links For?

 

[kkapsner]

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Um noch ein bisschen rumzustänkern: es heißt onclick.

<a onclick="Aendern1()" class="plugin-filter" data-filter="beispiel" >Link</a>