✔ CSS-Klasse "selected" nur bei selektierten Elementen anzeigen

pyretta · 9. November 2012

Hallo,

sicher wird jetzt jeder Javascript-Profi müde lächeln und denken "nix leichter als das", aber ich kriegs irgendwie nicht so richtig hin.
Google hat mir leider auch nicht viel weiter geholfen.

Also: Dass dem selektierten Element die Klasse "selected" hinzugefügt wird, das hab ich schon erreicht. Nur, bleibt die Klasse einfach für ewig (also bis die Seite wieder aktualisiert wird..) bestehen. Das möchte ich natürlich nicht.

Wie krieg ich diese Klasse wieder weg ohne ALLE Klassen des Elements zu entfernen, also schlicht das Attribut an sich (removeAttribute("class"))?

Ich hab schon jQuery und "removeClass" ausprobiert, aber das hat nichts gebracht. Wie gesagt, alle bisher über Google recherchierten Lösungsansätze brachten bei mir nix.

Deshalb hoffe ich auf Eure Hilfe.

Hier mein Code bisher:

Code:

<script>
function showdetails(auswahl) {	
	var detailcon_boxes = document.getElementsByTagName("div");
	var small_img = document.getElementsByTagName("div");
	
            for(var x=0; x<detailcon_boxes.length; x++) {
                  name = detailcon_boxes[x].getAttribute("class");
                  if (name == 'detailcon_boxes') {
                        if (detailcon_boxes[x].id == auswahl) {
                        detailcon_boxes[x].style.display = 'block';						
			select_img('small_img' + x);
                  }
                  else {
                        detailcon_boxes[x].style.display = 'none';
                  }
            	}
     		}
		}
		
function select_img(selektion) {
	var small_img = document.getElementsByTagName("div");
	
            for(var i=0; i<small_img.length; i++) {
                  name = small_img[i].getAttribute("class");
                  if (name == 'small_img') {
                        if (small_img[i].id == selektion) {
                        small_img[i].className += ' selected';					
                  }
                  else {
                        $(small_img[i].removeClass('selected'));
                  }
            	}
     		}
		}
</script>


<div id="details">
	<div id="detailcon_boxes1" class="detailcon_boxes" style="display: block;">
    1
    </div>
	<div id="detailcon_boxes2" class="detailcon_boxes" style="display: none;">
    2
    </div>
	<div id="detailcon_boxes3" class="detailcon_boxes" style="display: none;">
    3
    </div>
</div>
<div id="minis">
	<div id="small_img1" class="small_img">
        <a id="myHeader1" class="myclass" href="javascript:showdetails('detailcon_boxes1');" >
        collapse
        </a>
    </div>
	<div id="small_img2" class="small_img"> 
       <a id="myHeader2"class="myclass" href="javascript:showdetails('detailcon_boxes2');" >
       collapse
       </a>
    </div>
	<div id="small_img3" class="small_img">
    	<a id="myHeader3"class="myclass"  href="javascript:showdetails('detailcon_boxes3');" >
        collapse
        </a>
    </div>
</div>

Hier mal ne kleine Liste, was ich alles schon ausprobiert habe und nicht funktioniert hat:

http://blog.dirk-helbert.de/2010/08/12/mit-javascript-css-klassen-hinzufugen-und-entfernen/ (Das habe ich zugegebener Maßen nicht so recht verstanden... )
box.removeAttribute("class") (http://stackoverflow.com/questions/5169017/how-to-remove-class-attribute-from-div) - Das hat schon funktioniert, aber es hat mir eben ALLE Klassen des Elements gelöscht... Das sollte auch nicht sein. Auch ein umschreiben in removeAttribute("class", "selected") hat nix geholfen.

Vielleicht hab ichs aber auch falsch umgesetzt. Wer weiss... Bin noch recht unerfahren in Sachen JavaScript.

timestamp · 10. November 2012

Wenn du den neuen Selektor setzt, entferne vorher einfach alle Selektoren von den Elementen die sie haben können.

Quaese · 10. November 2012

Hi,

vielleicht sind die Methoden search und replace das richtige:

Code:

<script type="text/javascript">
function showdetails(auswahl){
  var detailcon_boxes = document.getElementsByTagName("div"),
    self = document.getElementById(auswahl);

  for(var x=0, iLen=detailcon_boxes.length; x<iLen; x++) {
    var current = detailcon_boxes[x];

    if(current.className.search(/detailcon_boxes/) != -1){
      current.style.display = (current == self)? 'block' : 'none';

      if(current.id == auswahl)
        select_img('small_img' + x);
    }
  }
}

function select_img(selektion) {
  var small_img = document.getElementsByTagName("div"),
    self = document.getElementById(selektion);

  for(var i=0, iLen=small_img.length; i<iLen; i++) {
    var current = small_img[i];

    if(current.className.search(/small_img/) != -1)
      current.className = (current == self)
        ? (current.className + ((current.className.search(/selected/)!=-1) ? '' : ' selected'))
        : current.className.replace(/\sselected/g, "");
  }
}
</script>
<div id="details">
  <div id="detailcon_boxes1" class="detailcon_boxes" style="display: block;">1</div>
  <div id="detailcon_boxes2" class="detailcon_boxes" style="display: none;">2</div>
  <div id="detailcon_boxes3" class="detailcon_boxes" style="display: none;">3</div>
</div>
<div id="minis">
  <div id="small_img1" class="small_img">
    <a id="myHeader1" class="myclass" href="javascript:showdetails('detailcon_boxes1');">collapse</a>
  </div>
  <div id="small_img2" class="small_img">
    <a id="myHeader2"class="myclass" href="javascript:showdetails('detailcon_boxes2');">collapse</a>
  </div>
  <div id="small_img3" class="small_img">
    <a id="myHeader3"class="myclass"  href="javascript:showdetails('detailcon_boxes3');">collapse</a>
  </div>
</div>

Ciao
Quaese

pyretta · 12. November 2012

Hallo timestamp und Quaese,
vielen Dank für eure Antworten.

@timestamp: Das mit alle Klassen löschen, geht von dem her nicht, da ich die Klasse "small_img" benötige, um auch den richtigen DIVs die neue Klasse zu geben. (glaub ich zumindest)

@Quaese: Cool! Hast den Code reichlich aufgeräumt, vielen Dank. Sieht ja um Längen besser aus jetzt, viel eleganter. Aber leider wird jetzt die Klasse "selected" gar nicht mehr vergeben. Auch nicht beim selektierten Element...

Ich bin leider nicht gut genug um da richtig durchzusteigen worans liegen könnte.

Wenn ich das richtig verstanden habe, dann sind das hier
"current.className = (current == self)
? (current.className + ((current.className.search(/selected/)!=-1) ? '' : ' selected')) : current.className.replace(/\sselected/g, "");"

verkürzte If-Anweisungen wie in PHP?

Da versteh ich glaub ich diesen Teil nicht so recht "current.className = (current == self)", weil current bzw. self sind doch IDs und keine Klassen, oder seh ich das falsch? Hab das aber auch schon so umgeschrieben: "current.id = (current == self)". Hat aber auch nicht funktioniert.

Und was ich auch nicht verstehe (bin wie gesagt recht unerfahren noch mit JavaScript) wieso immer "!=-1" also nicht gleich -1?

erik s. · 12. November 2012

Du hast im ersten Post erwähnt, dass du auch bei jQuery recherchiert hast. Setzt du das Framework denn auch ein?
Falls ja, benötigst du nur sehr wenige Zeilen Code für dein Vorhaben, denn mit addClass() und removeClass() oder gar toggleClass() lässt sich ganz gut arbeiten

Javascript:

var toggleDisplay = function(el_id)  {
  var thebox = $('#my_infobox_' + el_id);

  if(thebox.css('display') == 'none')  // Box wieder einblenden
    thebox.addClass('selected').show();
  else  // Box ausblenden
    thebox.removeClass('selected').hide();
}

HTML:

<style type="text/css">
.infobox { display: none; }
</style>

<div class="infobox" id="my_infobox_1">erste Infobox</div>
<div class="infobox" id="my_infobox_2">zweite Infobox</div>
<div class="infobox" id="my_infobox_3">dritte Infobox</div>

<div>
  <a href="javascript:void(0);" onclick="javascript:toggleDisplay('1');">Box 1 ein-/ausblenden</a><br />
  <a href="javascript:void(0);" onclick="javascript:toggleDisplay('2');">Box 2 ein-/ausblenden</a><br />
  <a href="javascript:void(0);" onclick="javascript:toggleDisplay('3');">Box 3 ein-/ausblenden</a><br />
</div>

Grüße

pyretta · 12. November 2012

Hallo erik s.,
auch Dir vielen Dank für Deine Antwort.

Also prinzipiell: jQuery sieht einfach etwas schicker aus

.

Aber, auch das funktioniert nicht 100% so wie ichs bräuchte.

Ich glaub ich hab euch verwirrt

. Der Code von mir, führt eventuell ein wenig in die Irre, weil ichs verkürzen wollte.

Das Ganze soll eigentlich so ääähnlich wie ein "Slider" funktionieren. Unten sind Vorschaubilder, oben die großen Bilder mit beschreibendem Text. Ein großes Bild mit Text soll IMMER angezeigt werden, es soll nicht möglich sein alles auszublenden. Die Klasse "selected" soll den Vorschaubildern übergeben werden, nicht dem Infokasten mit großem Bild und Text. Die Klasse brauch ich, um dem User eine optische Orientierung zu gewährleisten, wo er sich gerade befindet.

Im Prinzip würd mir der Lösungsansatz von erik s. natürlich auch gut gefallen.

Da ich aber von jQuery noch weniger Plan habe

... müsste ich folgendes noch klären:

Wenn ich nun einem bestimmten Element ".show();" anhänge, wird dann auch nur dieses Element angezeigt und automatisch alles andere ausgeblendet? Wär ja genial...
Und wie krieg ich dann die neue Klasse einem anderen Element hinzugefügt das zwar damit zu tun hat, aber mit "show();" nicht angesprochen wurde?

erik s. · 12. November 2012

Hi,

für dich würde es sich offenbar lohnen, sich mal intensiver mit dem Framework zu beschäftigen, da viele (häufig gebrauchte) Sachen und Funktionalitäten schon vereinfacht zur Verfügung stehen, bspw. das Anhängen oder Entfernen einzelner CSS-Klassen oder die AJAX-Funktionalitäten.

pyretta hat gesagt.:
Wenn ich nun einem bestimmten Element ".show();" anhänge, wird dann auch nur dieses Element angezeigt und automatisch alles andere ausgeblendet? Wär ja genial...

Nein, das musst du selbst anstoßen. Dazu lässt sich der Quelltext von eben schon gut verwenden:

Javascript:

var switchDisplay = function(el_id)  {
  // alle Infoboxen (über die CSS-Klasse identifiziert) erst ausblenden ...
  $('.infobox').removeClass('selected').hide();

  // ...  und dann eine bestimmte wieder einblenden.
  var thebox = $('#my_infobox_' + el_id);
  thebox.addClass('selected').show();
};

Der HTML-Anteil bleibt (fast) der gleiche. Es wird anfangs nur die erste Infobox eingeblendet:

HTML:

<style type="text/css">
.infobox { display: none; }
</style>

<div class="infobox" id="my_infobox_1" style="display: block;">erste Infobox</div>
<div class="infobox" id="my_infobox_2">zweite Infobox</div>
<div class="infobox" id="my_infobox_3">dritte Infobox</div>

<div>
  <a href="javascript:void(0);" onclick="javascript:switchDisplay('1');">Box 1 einblenden</a><br />
  <a href="javascript:void(0);" onclick="javascript:switchDisplay('2');">Box 2 einblenden</a><br />
  <a href="javascript:void(0);" onclick="javascript:switchDisplay('3');">Box 3 einblenden</a><br />
</div>

pyretta hat gesagt.:
Und wie krieg ich dann die neue Klasse einem anderen Element hinzugefügt das zwar damit zu tun hat, aber mit "show();" nicht angesprochen wurde?

Das wurde quasi mit obigem Quelltext erledigt.

Grüße

pyretta · 12. November 2012

Vielen Dank erik s. für deine Hilfe und deine Erklärungen.
Hab mich nun dran versucht das umzusetzen.
Klappte aber leider nicht... Hab bestimmt etwas falsch gemacht.

Also mit "klappt nicht" meine ich, dass das ein-/ausblenden nicht funktioniert und auch die Übergabe der Klasse "selected" geht nicht.

der Javascript-Code:

Javascript:

var showdetails = function(el_id)  {
  // alle Infoboxen (über die CSS-Klasse identifiziert) erst ausblenden ...
  $('.detailcon_boxes').hide();
  $('.small_img').removeClass('selected');
 
  // ...  und dann eine bestimmte wieder einblenden.
  var thebox = $('#detailcon_boxes' + el_id);
  thebox.show();
  
  var vorschaubild = $('#small_img' + el_id);
  vorschaubild.addClass('selected');
};

der HTML-Code:

HTML:

<div id="container">
<div id="details">
	<div id="detailcon_boxes1" class="detailcon_boxes" style="display: block;">
        <div class="picture">
            <img src="bild_1_big.jpg" alt="" title="" />
        </div>
        <div class="description">
            <h1>Überschrift...</h1>
            <ul>
            <li>blablabla</li>
            <li>blablabla</li>
            <li>blablabla</li>
            </ul>            
        </div>
    </div>
	<div id="detailcon_boxes2" class="detailcon_boxes" style="display: none;">
    	<div class="picture">
            <img src="bild_2_big.jpg" alt="" title="" />
        </div>
        <div class="description">
            <h1>Überschrift...</h1>
            <ul>
            <li>blablabla</li>
            <li>blablabla</li>
            <li>blablabla</li>
            </ul>            
        </div>
    </div>
	<div id="detailcon_boxes3" class="detailcon_boxes" style="display: none;">
    	<div class="picture">
            <img src="bild_3_big.jpg" alt="" title="" />
        </div>
        <div class="description">
            <h1>Überschrift...</h1>
            <ul>
            <li>blablabla</li>
            <li>blablabla</li>
            <li>blablabla</li>
            </ul>            
        </div>
    </div>
</div>
<div id="minis">
	<div id="small_img1" class="small_img selected">
        <a id="link1" class="link" href="javascript:showdetails('1');" >
        <img src="bild_1_small.jpg" alt="" title="" />
        <span>blablabla...</span>
        </a>
    </div>
	<div id="small_img2" class="small_img"> 
       <a id="link2"class="link" href="javascript:showdetails('2');" >
       <img src="bild_2_small.jpg" alt="" title="" />
        <span>blablabla...</span>
       </a>
    </div>
	<div id="small_img3" class="small_img">
    	<a id="link3"class="link"  href="javascript:showdetails('3');" >
        <img src="bild_3_small.jpg" alt="" title="" />
        <span>blablabla...</span>
        </a>
    </div>
</div>
</div>

EDIT:

Ziehe alle Bedenken zurück

. Es funktioniert FABELHAFT!

Es lag an der Kompatibilität zwischen jQuery und Mootools, habe einfach die $ durch jQuery ersetzt, nun läufts wie geschmiert.

VIELEN DANK an alle und besonders an erik s.

✔ CSS-Klasse "selected" nur bei selektierten Elementen anzeigen

pyretta

Mitglied

timestamp

Mitglied Käsekuchen

Quaese

Moderator

pyretta

Mitglied

erik s.

Erfahrenes Mitglied

pyretta

Mitglied

erik s.

Erfahrenes Mitglied

pyretta

Mitglied

Neue Beiträge