Ich möchte drei CSS-Klassen plus eine Standardklasse hinzufügen / entfernen. Beispiel: Wenn ich auf den ersten Anker klicke, wird eine neue Klasse namens style1 hinzugefügt und der Standardstil entfernt. Wenn ich auf den zweiten Anker klicke, wird style1 entfernt und style2 hinzugefügt, und dasselbe gilt für anchor3.

Das Problem ist, wenn ich zunächst auf anchor3 klicke, passiert nichts, ich kann die Aktion nicht rückgängig machen.

Wie kann ich dafür sorgen, dass die Klassen zum Hinzufügen / Entfernen funktionieren, unabhängig davon, auf welchen Link ich zuerst klicke? Ich muss die drei Stile verwenden, aber auch einen Standardstil.

Hier ist der Code auf JFiddle: http://jsfiddle.net/VadUE/2/

Es funktioniert im Browser, aber nicht in JSFiddle.

Code:

$(document).ready(function() {
    $('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');
        $('.anchor2').click(function() {
            $('p').addClass('style2').removeClass('style1');
            $('.anchor3').click(function() {
                $('p').addClass('style3').removeClass('style2');
            });
        });
    });
});


<style type="text/css">
.style1{
    color: #FF8000;
}
.style2{
    color: #F36;
}

.style3{
    color: #00F;
}

.default{
    color: #0C0;
}
</style>


<a class="anchor1" href="#/">Link1</a>
<a class="anchor2" href="#/">Link2</a>
<a class="anchor3" href="#/">Link3</a>
<p class="default">This is a sequence into a sound</p>
1
Asynchronous 6 Okt. 2012 im 11:00

3 Antworten

Ich würde Ihren HTML-Code ein wenig ändern:

<a class="anchor" href="#/">Link1</a>
<a class="anchor" href="#/">Link2</a>
<a class="anchor" href="#/">Link3</a>

Und dann verwenden Sie einfach diesen einfachen JS-Code:

$(document).ready(function() {
    $('.anchor').click(function() {
        $('p').attr('class', 'style' + ($(this).index() + 1));
    });
});​

Demo: http://jsfiddle.net/VadUE/4/

Das Problem mit Ihrem ursprünglichen Code war, dass Sie die Ereignishandler seltsamerweise gebunden haben (einer wird erst gebunden, nachdem ein anderer ausgelöst wurde). Sie möchten sie alle einzeln binden.

2
Blender 6 Okt. 2012 im 07:06

Sie verwenden eine falsche Bindung

$('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');

}


$('.anchor2').click(function() {
        $('p').addClass('style1').removeClass('style1');

}

Oder Sie können verwenden

 $('a[class^=anchor]').click(function() {
            $('p').addClass('style'+this.id).removeClass($(this).attr("class"));

    }
0
StaticVariable 6 Okt. 2012 im 07:06

Das Problem ist, dass Sie die Klick-Handler für Ihren zweiten und dritten Link innerhalb des Klick-Handlers für den ersten verknüpfen. Dies bedeutet, dass Ihr zweiter und dritter Link erst funktionieren, nachdem Sie auf den ersten geklickt haben.

Ihr aktueller Code

$('.anchor1').click(function() {
    $('p').addClass('style1').removeClass('default');
    $('.anchor2').click(function() {
        $('p').addClass('style2').removeClass('style1');
        $('.anchor3').click(function() {
            $('p').addClass('style3').removeClass('style2');
        });
    });
});

Sollte geändert werden zu

   $('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');
    });

    $('.anchor2').click(function() {
        $('p').addClass('style2').removeClass('style1');
    });

    $('.anchor3').click(function() {
        $('p').addClass('style3').removeClass('style2');
    });
0
techfoobar 6 Okt. 2012 im 07:04