Text mit JS hin und her ändern

Telmata

Hi,
ich habe folgendes Script um einen Inhalt ein und auszublenden:

Code

function swap_content( span ) {
    displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'block' : 'none';
    document.getElementById( span ).style.display = displayType;
}


function swap_content_tr( span, setmce, element ) {
    // folgendes funzt nicht im internet-explorer:
    //displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'table-row' : 'none';
    // deshalb der workaround:
    displayType = ( document.getElementById( span ).style.display == 'none' ) ? '' : 'none';
    document.getElementById( span ).style.display = displayType;
    if( setmce == true)
    {
            if(document.getElementById( span ).style.display == 'none')
            {
                    tinyMCE.execCommand('mceRemoveControl', false, element);
            }
            else
            {
                    tinyMCE.execCommand('mceAddControl', false, element);
            }
    }
}

Alles anzeigen

das ganze rufe ich über folgendes auf:

PHP

<a href="#" onclick="swap_content('<?php echo $row['id'];?>_1n1_<?php echo $count;?>'); return false;">mehr...</a>
                                                              <span id="<?php echo $row['id'];?>_1n1_<?php echo $count;?>" style="display: none;">

ausgabe im Browser:

Code

<a href="#" onclick="swap_content('2_1n1_1'); return false;">mehr...</a>
<span id="2_1n1_1" style="display: none;">(text)</span>

Wie bekomme ich es nun hin das sich der Text (also "mehr...") in "weniger..." ändert sobald die Informationen aufgeklappt sind?
Natürlich sollte das ganze auch wieder andersrum funktionieren.

Da ich das Script von jemandem bekommen habe und ich selber einfach kein JS kann frag ich hier mal.
(google/sufu benutzt)
probiert hatte ich es schon über:

Code

function swap_content( span ) {
    displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'block' : 'none';
    document.getElementById( span ).style.display = displayType;
}


function swap_content_tr( span, setmce, element ) {
    // folgendes funzt nicht im internet-explorer:
    //displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'table-row' : 'none';
    // deshalb der workaround:
    displayType = ( document.getElementById( span ).style.display == 'none' ) ? '' : 'none';
    document.getElementById( span ).style.display = displayType;
    if( setmce == true)
    {
            if(document.getElementById( span ).style.display == 'none')
            {
                    tinyMCE.execCommand('mceRemoveControl', false, element);
                    document.getElementById( span ).innerHTML = 'test';
            }
            else
            {
                    tinyMCE.execCommand('mceAddControl', false, element);
                    document.getElementById( span ).innerHTML = 'test2';
            }
    }
}

Alles anzeigen

Afrael

Ungetestet:

Code

function swap_content( span ) {
    displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'block' : 'none';
    document.getElementById( span ).style.display = displayType;
    toggleLink = document.getElementById('toggle_'+span);
    toggleLink.innerHTML = (toggleLink.innerHTML == "mehr...") ? "weniger..." : "mehr...";
}

Dem Link weist du dann noch eine ID zu.

PHP

<a href="#" onclick="swap_content('<?php echo $row['id'];?>_1n1_<?php echo $count;?>'); return false;" id="toggle_<?php echo $row['id'];?>_1n1_<?php echo $count;?>">mehr...</a>
                                                              <span id="<?php echo $row['id'];?>_1n1_<?php echo $count;?>" style="display: none;">

Ausgabe ist dann

Code

<a href="#" onclick="swap_content('2_1n1_1'); return false;" id="toggle_2_1n1_1">mehr...</a>
<span id="2_1n1_1" style="display: none;">(text)</span>

Telmata

danke, werde ich heute nachmittag mal ausprobieren

*edit*
gerade probiert, funktioniert leider nicht =/

threadi

Dann schau mal an deine JavaScript-Konsole was das für ein Fehler ist

Telmata

ist das bei Firefox unter Extras -> Fehlerkonsole?
wenn ja, da steht nichts

phore

Post mal ein einfaches HTML gerüst, und beschreib was genau du dir vorstellst, dann mach ich dir das mal eben.

The User

Firebug probiert?

Telmata

ok, was vereinfachtes:

HTML

<html>
<head><title>klapp mich auf</title></head>
<body>
Hier steht das Ergebniss eines Spieles <a href="#">klick mich für mehr</a>
<span style="display: none;">Hier steht das genaue Ergebniss</span>
</body>
</html>

vielleicht hilft dieses bild:
klick mich

Bei einem klick auf "mehr..." werden eben mehr Informationen angezeigt (lässt sich wieder "einklappen").
aber das "mehr..." soll dann eben zu "weniger..." werden

PS:
Das auf dem Bild noch einiges buggy ist, ist mir klar, aber ich hab halt nur bei dem JS Problem zu kämpfen weil JS ganz und garnicht mein Gebiet ist

phore

Ok, warte mal kurz.

*edit*
da:

HTML

<html>
<head>
<script type="text/javascript">
	// global - welche view wird gerade angezeigt
  var open_view = '';

	// inhalt switchen
	// @param link  HTML referenz des gelickten <a> Elements
	function toggleView (link)
	  {
		// aus der link id die view-id holen
		var view_id = link.id.substr(link.id.length-1, 1);

		// wenn schonmal ein view geöffnet wurde
		if (open_view)
		  {
			// den "mehr" teil holen von der aktuellen view-id
			var view_more = document.getElementById('view_more_' + view_id);

			// wenn der geklickte link der derzeit geöffnete view ist
			if (open_view == view_id)
			  {
				// wenn es im moment versteckt ist -> anzeigen
				if (view_more.style.display == 'none')
				  {
					view_more.style.display = 'inline';
					link.innerHTML = '[weniger]';
					}
				// wenn es im moment angezeigt wird -> verstecken
			  else
				  {
					view_more.style.display = 'none';
					link.innerHTML = '[mehr]';	
					}				
				}
		  // wemm das view nicht dasselbe ist, wie das was angeklickt wurde
		  else
			  {
				// die derzeit geöffnete view und link verstecken
				var old_link = document.getElementById('view_link_' + open_view);
				var old_view_more = document.getElementById('view_more_' + open_view);
				old_view_more.style.display = 'none';
				old_link.innerHTML = '[mehr]';
				// der neue link als geöffnet markieren und das dazugehörige view anzeigen
				link.innerHTML = '[weniger]';				
				view_more.style.display = 'inline';
				}		
			}
	  // es wurde noch nie ein view angezeigt
	  else
		  {
			// das zum geklickten link gehörende view holen und anzeigen
			var view_more = document.getElementById('view_more_' + view_id);
			view_more.style.display = 'inline';
			link.innerHTML = '[weniger]';
			}
		// globale geöffnete view neu deklarieren
		open_view = view_id;
		}
</script>
</head>
<body>


<div>
  <p>Hier steht das Ergebnis eines Spiels.</p>
	<a href="#" id="view_link_1" onclick="toggleView(this);">[mehr]</a>
	<span id="view_more_1" style="display: none;">
	  Hier stehen dann weitere Informationen.
	</span>
</div>
<hr>
<div>
  <p>Hier steht das Ergebnis eines Spiels.</p>
	<a href="#" id="view_link_2" onclick="toggleView(this);">[mehr]</a>
	<span id="view_more_2" style="display: none;">
	  Hier stehen dann weitere Informationen.
	</span>
</div>
<hr>
<div>
  <p>Hier steht das Ergebnis eines Spiels.</p>
	<a href="#" id="view_link_3" onclick="toggleView(this);">[mehr]</a>
	<span id="view_more_3" style="display: none;">
	  Hier stehen dann weitere Informationen.
	</span>
</div>


</body>
</html>

Alles anzeigen

Wenn du noch Fragen hast nur zu.

*nochmal edit*
Scheisse - hat die Tabulatoren verschoben. Sorry.

thilda

Das beste Bsp ist sicher Youtube. Da gibt es in dem grauen Kästchen wo der benutzer drinne steht auch sowas...

Telmata

habs jetzt so drin:

PHP

<a href="#" id="view_link_<?php echo $row['id'];?>_1n1_<?php echo $count;?>" onclick="toggleView(this);">[mehr]</a>
<span id="view_more_<?php echo $row['id'];?>_1n1_<?php echo $count;?>" style="display: none;">

und dann passiert garnichts beim draufklicken =/ (dein script natürlich benutzt)

phore

Die id's müssen genau so sein wie sie bei mir sind, sonst funzt das nicht.
Nimm einfach meine Id's und ersetz die Zahl mit der ID aus der DB.

Telmata

das wird dann aber problematisch

ich hab 3-5 Clanwars die angezeigt werden (weis noch nicht genau)
und jeder beinhaltet 6 Spiele

ich könnte höchstens die zahlen aneinander ketten... mal testen^^

*edit*
diese 2 varianten wollen nicht:

Code

<a href="#" id="view_link_411" onclick="toggleView(this);">[mehr]</a>

Code

<a href="#" id="view_link_41n11" onclick="toggleView(this);">[mehr]</a>

das geht aber:

Code

<a href="#" id="view_link_1" onclick="toggleView(this);">[mehr]</a>

nur das Problem ist das ich in den 3stelligen bereich kommen MUSS, wenn nicht sogar noch höher

Pion

Wenn ihr phore seine Lösung net hinbekommt oder sonst was ist nehmt doch einfach das:

http://www.qxm.de/webdesign/2003…usblenden?com=1

mfg

Telmata

so wie ich das gelesen habe hilft das null weiter.

Ein Script für das ein/ausblenden habe ich bereits, allerdings soll es gleichzeitig den Text ändern, das habe ich bei deinem link nicht finden können

Pion

Bitte schön Für nen Kuss darfst es verwenden:

HTML

<html>
<head>
<script type="text/javascript">
    // global - welche view wird gerade angezeigt
  var open_view = '';

    // inhalt switchen
    // @param link  HTML referenz des gelickten <a> Elements
    function toggleView (link)
      {
        // aus der link id die view-id holen

        var test = link.id.split("_");
        var view_id = test[2];


        // wenn schonmal ein view geöffnet wurde
        if (open_view)
          {
            // den "mehr" teil holen von der aktuellen view-id
            var view_more = document.getElementById('view_more_' + view_id);

            // wenn der geklickte link der derzeit geöffnete view ist
            if (open_view == view_id)
              {
                // wenn es im moment versteckt ist -> anzeigen
                if (view_more.style.display == 'none')
                  {
                    view_more.style.display = 'inline';
                    link.innerHTML = '[weniger]';
                    }
                // wenn es im moment angezeigt wird -> verstecken
              else
                  {
                    view_more.style.display = 'none';
                    link.innerHTML = '[mehr]';    
                    }                
                }
          // wemm das view nicht dasselbe ist, wie das was angeklickt wurde
          else
              {
                // die derzeit geöffnete view und link verstecken
                var old_link = document.getElementById('view_link_' + open_view);
                var old_view_more = document.getElementById('view_more_' + open_view);
                old_view_more.style.display = 'none';
                old_link.innerHTML = '[mehr]';
                // der neue link als geöffnet markieren und das dazugehörige view anzeigen
                link.innerHTML = '[weniger]';                
                view_more.style.display = 'inline';
                }        
            }
      // es wurde noch nie ein view angezeigt
      else
          {
            // das zum geklickten link gehörende view holen und anzeigen
            var view_more = document.getElementById('view_more_' + view_id);
            view_more.style.display = 'inline';
            link.innerHTML = '[weniger]';
            }
        // globale geöffnete view neu deklarieren
        open_view = view_id;
        }
</script>
</head>
<body>


<div>
  <p>Hier steht das Ergebnis eines Spiels.</p>
    <a href="#" id="view_link_12" onClick="toggleView(this);">[mehr]</a>
    <span id="view_more_12" style="display: none;">
      Hier stehen dann weitere Informationen.
    </span>
</div>
<hr>
<div>
  <p>Hier steht das Ergebnis eines Spiels.</p>
    <a href="#" id="view_link_2" onClick="toggleView(this);">[mehr]</a>
    <span id="view_more_2" style="display: none;">
      Hier stehen dann weitere Informationen.
    </span>
</div>
<hr>
<div>
  <p>Hier steht das Ergebnis eines Spiels.</p>
    <a href="#" id="view_link_3" onClick="toggleView(this);">[mehr]</a>
    <span id="view_more_3" style="display: none;">
      Hier stehen dann weitere Informationen.
    </span>
</div>


</body>
</html>

Alles anzeigen

Telmata

dankeschön^^
funktioniert perfekt

darf ich fragen warum es nicht geht wenn ich ein _ in die ID einfüge?

Pion

Das script nimmt den Link

view_link_22

Dann trennt es den immer wo ein "_" ist,

also hat das script dann view , link , 22 und dann rechnet das script immer mit dem Wert nach dem 2ten _ weiter was quasi immer die id ist;)

Spricht aus view_link_223134 macht er

view
link
223134 <- und das verwendet er dann

Wenn du nun ein _ davor noch reinmachst also view_test_link_223134 dann hat er
view
test
link <- versucht er mit dem zurechnen , aber das ist nicht die id
223134
mfg

Telmata

ah ok, danke für die Aufklärung

mist, grad einen "fehler" entdeckt

man kann immer nur eine Information aufgeklappt haben, sobald man eine weitere aufklappen möchte geht die andere wieder zu =/

und wenn ich den teil rausnehme:

Code

// die derzeit geöffnete view und link verstecken
                var old_link = document.getElementById('view_link_' + open_view);
                var old_view_more = document.getElementById('view_more_' + open_view);
                old_view_more.style.display = 'none';
                old_link.innerHTML = '[mehr]';

muss man einen doppelklick machen zum schliesen =/

aber das passt schon, wenn dadurch das andere eingeklappt wird bleibts übersichtlicher

Tags