Bestimmte (Text)-Stelle ansprechen.

[lisali]

Hallo,

ich möchte gerne mit einem Textlink (mit JQuery) einen Text ändern lassen mit einem Klick.

Beispiel: "<a>like</a> <br> You like that."

Wenn ich auf "like" klicke, soll das Wort "You like that." getoggelt werden. Also, bei jedem neuen Klick soll das Wort entweder verschwinden oder erscheinen. Und aus dem "like" wird dann entsprechend auch immer ein "dislike" werden.

Was kann ich da tun? Sollte ich das zu toggelnde Wort in ein <span> setzen? Das blöde dabei ist leider noch, dass es dynamisch sein soll. Also, es gibt mehrere Einträge. Das heißt, ich möchte nicht, dass ein Link auch dadrunterstehende Einträge bearbeitet.

 

[chmee]

Ich frickel das mal ausm Kopf hin, Fehler sind möglich.

<a id="toggleA">like</a><span id="changeA">like that!</span>

<script type="text/javascript">
$("#toggleA").toggle(
      function () {
        $("#changeA").text("Hate that!");
        $("#toggleA").text("dislike");
      },
      function () {
        $("#changeA").text("like that!");
        $("#toggleA").text("like");
      }
    );

</script>

http://api.jquery.com/toggle/ - Das Beispiel unten ist doch recht passend, oder?
dazu noch http://api.jquery.com/text/ - das sollte es wohl sein.

mfg chmee

 

[lisali]

Ja, das ist nicht so das Problem. Ich weiß nur nicht wie ich diese eine bestimmte ID anspreche bzw. ein spezifisches Feld. Mit "this" bekomme ich den toggle hin, indem ich eine if-Abfrage mache, aber der nachstehende Text "You like this" ist mir wichtig. Diesen kann ich nicht ansprechen bzw. weiß ich nicht wie. Eben nur diesen einen Text.

Beispiel:

Kommentar 1
Like-Link
You like that.

Kommentar 2
Like-Link

Kommentar 3
Like-Link

Kommentar 4
Like-Link
You like that.

In dem Beispiel jetzt hätte ich den Like-Link von Kommentar 1 und 4 geklickt. Mit dem Code jedoch würde es nicht dynamisch sein, sondern bei jedem Kommentar dann "You like that." setzen, auch wenn ich nur z.B. Kommentar 1 angeklickt mit Like-Link habe.

 

[Quaese]

Hi,

wenn du den "like-Text" in ein span-Element einbindest und sich dieses auf der gleichen Ebene wie der Link befindet, kannst du mit der siblings-Methode darauf zugreifen.

Beispiel:

$(function(){
  $('a').click(function(){
    var _this = $(this);
    $(this).siblings('span:eq(0)').toggle(function(){
    	_this.html((($(this).is(':hidden'))? "dislike" : "like"));
    });
    return false;
  });
});

HTML:

<a>like</a> <br> <span>You like that.</span>

Ciao
Quaese

 

[lisali]

Hey Quaese,

darf ich fragen wieso die Variable "_this" extra definiert wurde?

Also, den Toggle habe ich auch hingekriegt, jedoch anders, weil ich das Problem bei der ".toggle"-Funktion hatte, dass der davorstehende Text sich wegschiebt:

if ($(this).attr('href') === '#1') 
{ 
$(this).html("mag ich nicht"); 
$(this).attr('href','#0');
} 
else 
{ 
$(this).html("mag ich"); 
$(this).attr('href','#1');
}

Ich kann aber immernoch nicht direkt dieses <span>-Element ansprechen. Also, dass sich das "You like that." ändert.

 

[Quaese]

Hi,

_this ist eine Referenz auf das auslösende A-Element. Da dieses innerhalb der toggle-Funktion benötigt wird, wird es "geclosured". Denn dort steht this für das Ziel-SPAN.

Ciao
Quaese

 

[lisali]

Was bedeutet geclosured genau?

Also, ich habe es leider immer noch nicht hinbekommen, dass sich dadurch der <span>-Inhalt ändert.

 

[Quaese]

Hi,

mehr zu Closures findest du hier.

Was gefällt dir an meinem Script nicht?

Poste doch mal die HTML-Passage und dein bisheriges zugehöriges JS. Es ist immer schwer den aktuellen Zustand zu erraten.

Ciao
Quaese

 

[lisali]

Hey,

mir gefällt nur nicht, dass das kein richtiger Toggle ist. Also, es slidet immer so ruckelig hin und her, wenn ich klicke...

und mein Code:

if ($(this).attr('href') === '#1') 
{ 
$(this).html("mag ich nicht"); 
$(this).attr('href','#0');
} 
else 
{ 
$(this).html("mag ich"); 
$(this).attr('href','#1');
}

... den wollte ich eigentlich gern in dein Script einbinden, dass man eventuell die Codezeilen-Anzahl verkürzt, aber wie gesagt verursacht der toggle immer so ein komisches und ruckeliges Sliding.

 

[SpiceLab]

Achtung: Eine Toggle-Funktion ist nicht automatisch mit einer ruckelfrei-sanften gleitenden Bewegung ausgestattet, die dir smoothe Slides ins Webdokument hinlegt - jQuery unterscheidet in seinen Effekten (http://api.jquery.com/category/effects/) auch klar und deutlich zwischen .toggle() und .slideToggle() :suspekt:

Von wem du Gebrauch machst, weißt nur du alleine, und ich folge einfach meiner Intuition, aber wie dein problembehafteter HTML- u. JS-Code nun konkret lautet, bist du bislang, und trotz Quaeses Bitte darum in seinem letzten Post, hier schuldig geblieben. Danke dafür!

Kann man für dich nur hoffen und beten, dass doch ein Hellseher sich hierher ins Forum verirren, und deiner mageren Angaben annehmen möge - Amen!