[JavaScript] Hilfe bei if else oneClick Funktion

Buzzer · 30. November 2012

Hilfe bei if else oneClick Funktion

Hi,

ich habe leider null Ahnung von Javascript und mir das folgende so einigermaßen zusammen gereimt.

Vll. kann mir jemand helfen wie es richtig lauten muss.

Ich möchte das wenn einer der <li> elemente geklickt wird, sich diese Klasse ändert und bei den anderen <li> elementen die Klasse auf " " gesetzt wird.

Code:

<script type="text/javascript"> 
function highlight()
{
 
 
 if(document.getElementById("link1"))
 
 document.getElementById("link1").setAttribute("class", "activeliul");
 document.getElementById("link2").setAttribute("class", "");
 document.getElementById("link3").setAttribute("class", "");
 
 else if(document.getElementById("link2"))
 
 document.getElementById("link1").setAttribute("class", "");
 document.getElementById("link2").setAttribute("class", "activeliul");
 document.getElementById("link3").setAttribute("class", "");
 
 else if(document.getElementById("link3"))
 
 document.getElementById("link1").setAttribute("class", "");
 document.getElementById("link2").setAttribute("class", "");
 document.getElementById("link3").setAttribute("class", "activeliul");
 else
 document.getElementById("link1").setAttribute("class", "");
 document.getElementById("link2").setAttribute("class", "");
 document.getElementById("link3").setAttribute("class", ""); 
}
</script>

html/php Teil:

Code:

<li id=\"link1\" onclick=\"highlight();\"><a href=\"e162.php\" target=\"iframe\">LinkA</a></li>
 <li id=\"link2\" onclick=\"highlight();\"><a href=\"e160.php\" target=\"iframe\">LinkB</a></li>
 <li id=\"link3\" onclick=\"highlight();\"><a href=\"e161.php\" target=\"iframe\">LinkC</a></li>

Edit:

Also ich habe einige Fehler beheben können,

es muss

Code:

onclick=\"return highlight();\"

heißen.

Ich habe das mit der if nicht gelöst bekommen, deswegen habe ich jetzt jedem Link ein Nummer vergeben:

Code:

onclick=\"return highlight1();\"
onclick=\"return highlight2();\"
onclick=\"return highlight3();\"

etc

Und rufe jetzt jeweils eine andere Funktion auf.

Aber das lässt sich doch sicher auch etwas kompakter lösen oder?

Anzeige

powernator · 30. November 2012

AW: Hilfe bei if else oneClick Funktion

Nicht die sauberste, aber eine kurze Lösung, die funktioniert:

Code:

$(document).ready(function(){
 $("ul#framechange > li").click(function(){
 $("ul#framechange > li").removeClass(); 
 $(this).addClass("active");
 });
});

Edit fiddle - JSFiddle - hier mit Testcode

Das kann man sicherlich auch mit Mootools oder anderen Bibliotheken umsetzen und ist hier imo empfehlenswert, da der Code - wie man sieht - sich auf einen Teil des vorherigen minimiert und auch wesentlich lesbarer wird.

Es besteht auch die Möglichkeit, das aktive li-Element in einer Variable (die außerhalb der Funktion initiiert wurde) zu speichern, zB active. Und wenn dann highlight aufgerufen/der Klick registriert wurde, entferne ich nicht von allen li-Elementen alle Klassen, sondern nur von active und setze active dann natürlich auf die ID des neuen Elements. Das sähe in deinem Beispiel wohl so aus (ungetestet):

Code:

<script>
var active = '';
function highlight(clicked)
{
 if (active != '')
 {
 // entferne Klasse/n von dem Element mit der ID active
 }
 active = clicked;
 // füge Klasse/n dem Element mit der ID active/clicked hinzu
}
</script>
<!-- ... -->
<li id="XYZ" onclick="return highlight(this.id);">...</id>
<li id="ABC" onclick="return highlight(this.id);">...</id>

x.KeY · 1. Dezember 2012

AW: Hilfe bei if else oneClick Funktion

hey buzzer,
ich habe dir mal schnell ein jquery plugin geschrieben.

code plugin (toggle-class.js):

Code:

(function($) {
 $.fn.raidClass = function(className) {
 this.each(function(){
 var me = $(this);
 var findLi = me.find('li');

 findLi.click(function() {
 me.find('.'+className).removeClass(className);
 $(this).addClass(className);
 });
 });
 }
})(jQuery);

hier der html code und die initialisierung des plugins (index.html):

Code:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
 <title>li toggle class</title>
 <meta charset="utf-8">
</head>
<body>
<ul id="raidRush">
 <li>raid rush1</li>
 <li>raid rush2</li>
 <li>raid rush3</li>
 <li>raid rush4</li>
 <li>raid rush5</li>
 <li>raid rush6</li>
 <li>raid rush7</li>
</ul>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/toggle-class.js"></script>

<script>
 $(document).ready(function(){
 $('#raidRush').raidClass('addClass');
 })
</script>
</body>
</html>

kurze erklärung:
ich habe die aktuelle jQuery (jQuery) version verwendet.
du kannst mit $('#raidRush').toggleClass('addClass'); wird das plugin gestartet addClass kannst du durch einen beliebigen classen namen austauschen

das plugin löscht auch nur die klasse die sie hinzufügt

Murdoc · 1. Dezember 2012

AW: Hilfe bei if else oneClick Funktion

Warum so umständlich?

Code:

var lis = $('ul.klasse > li'); 

lis.on('click', function() { 
 lis.removeClass('active'); 
 $(this).addClass('active'); 
});

Ohne jQuery:

Code:

var lis = document.querySelectorAll('ul.klasse > li');

[].forEach.call(lis, function(li) {
 li.addEventListener('click', function() {
 [].forEach.call(lis, function(li) {
 li.classList.remove('active');
 });

 li.classList.add('active');
 });
});

x.KeY · 2. Dezember 2012

AW: Hilfe bei if else oneClick Funktion

Hey murdoc,
Deine nicht Jquery Version ist auch ganz gut, aber nicht abwärtskompatibel, hier würde es nur bis ie8 funktionieren, mit der jquery Lösung würde er mehr Browser abdecken.

Murdoc · 2. Dezember 2012

AW: Hilfe bei if else oneClick Funktion

Genau genommen läuft das Script ohne jQuery nur in modernen Browsern (= IE10+ oder Gecko/Webkit/Presto), es sei denn man baut Array.prototype.forEach, EventTarget.prototype.addEventListener und Element.prototype.classList selbst ein.

Abwärtskompatibel sähe das so aus:

Code:

(function() {
 var classList = {
 add: function add(c) {
 this.classList.add(c);
 },
 remove: function remove(c) {
 this.classList.remove(c);
 }
 };
 
 if (!document.documentElement.classList) {
 classList.add = function add(c) {
 var klass = String(this.className);
 if (!(new RegExp('\\b' + c + '\\b')).test(klass))
 this.className += ' ' + c; 
 };
 
 classList.remove = function remove(c) {
 this.className = String(this.className)
 .replace(new RegExp('\\b' + c + '\\b', 'g'), '');
 };
 }
 
 var bind;
 
 if (Function.prototype.bind) {
 bind = function(f, c) {
 f.bind(c);
 }
 } else {
 bind = function(f, c) {
 return function() {
 f.apply(c, arguments);
 };
 }
 }
 
 var addEventListener = (function() {
 if (Element && Element.prototype.addEventListener)
 return Element.prototype.addEventListener;
 
 return function(n, f) { 
 // detachEvent will not work
 this.attachEvent('on' + n, bind(f, this));
 };
 })();
 
 // -------------------------------------
 
 var lis = document.querySelectorAll('ul.klasse > li');
 
 for (var i = 0, l = lis.length; i < l; ++i) {
 var li = lis[i];
 
 addEventListener.call(li, 'click', function() {
 for (var o = 0; o < l; ++o) 
 classList.remove.call(lis[o], 'active');
 
 classList.add.call(this, 'active');
 });
 }
})();

Wer Fehler findet darf sie behalten.

Nützliche Suchen

[JavaScript] Hilfe bei if else oneClick Funktion

Videos zum Themenbereich