2009-02-25 11 views
5

Ich habe den folgenden Code, die eine ähnliche Funktion wie die Art und Weise funktioniert der Kommentar Link hier auf Stackoverflow funktioniert ... wenn sie angeklickt es ein Action löst und füllt ein divDeaktivieren Links mit JQuery

$(function() { 
     $("a[id ^='doneLink-']").live('click', function(event) { 
      match = this.id.match(/doneLink-(\d+)/); 
      container = $("div#doneContainer-" + match[1]) 
      container.toggle(); 

      if (container.is(":visible")) { 
       container.load($(this).attr("href")); 
      } else { 
       container.html("Loading..."); 
      } 
      event.preventDefault(); 
     }); 
    }); 

ich will in der Lage sein, den Link-Text zu ändern, auf den sie geklickt haben, um etwas wie "Ausblenden" zu sagen und auch andere Links in dem kleinen Menü zu deaktivieren, in dem sich dieser Link befindet.

Edit: Die Quelle mit dieser Funktion zu gehen wie folgt aussieht

<div id="dc_lifelistmenu"style="float:left;padding-bottom:5px;font-size:10pt;width:400px;"> 
    <a href="/entries/addentry/86">Add Entry</a> | 
    <a href="/goals/adddaimoku/86" id="daimokuLink-2">Log Daimoku</a> | 
    <a href="/goals/done/86" id="doneLink-2">Mark Completed</a> | 
    <a href="/goals/remove/86">Remove</a> 
</div><br /> 
<div id='daimokuContainer-2' style="display:none;"> Loading...</div> 
<div id='doneContainer-2' style="display:none;"> Loading...</div> 
+0

nette Frage .......... –

Antwort

4

Um den Link Text in Ihrer Funktion zu ändern, verwenden Sie einfach:

this.text('New Text!'); 

Zum anderen Text zu deaktivieren, wir müssten die Quelle der Seite sehen. Ich bin nicht sicher, was Sie unter „Links“ bedeuten ...

UPDATE: Basierend auf Ihrer bearbeiten, dann denke ich, was Sie wollen:

$(function() { 
     $("a[id ^='doneLink-']").live('click', function(event) { 
      match = this.id.match(/doneLink-(\d+)/); 
      container = $("div#doneContainer-" + match[1]) 
      container.toggle(); 

      if (container.is(":visible")) { 
       container.load($(this).attr("href")); 
      } else { 
       container.html("Loading..."); 
      } 
      event.preventDefault(); 
      // added 
      this.text('Hide'); 
      // disable others manually, repeat and adjust for each link 
      $("#daimokuLink-" + match[1]).toggle(); 
      // or in one shot, all but the one I clicked 
      $("#dc_lifelistmenu:not(#doneContainer-" + match[1] + ")").toggle(); 
     }); 
    }); 

UPDATE 2: Ihren Kommentar. Um eine Verknüpfung zu deaktivieren, anstatt sie zu verbergen, deaktivieren Sie onclick, indem Sie sie außer Kraft setzen, anstatt toggle() zu verwenden.

$("#daimokuLink-" + match[1]).click(function() { return false; }); 
+0

$ (this) .text ('New Text!'); natürlich;) – ybo

+0

Ja das funktionierte jetzt, um die anderen Links nicht zu verstecken ... einfach nur, dass sie nicht angeklickt werden können. – dswatik

+0

Danke das hat perfekt funktioniert. – dswatik

3

Es gibt ein paar Möglichkeiten, dies zu nähern, wahrscheinlich die einfachste ist, einfach so etwas wie: $ ('a') Filter ('nicht: #doneLink') verstecken();.. , um alle Links auszublenden, die nicht die oben angegebene sind.

Schauen Sie sich diese Seite für mehr auf jQuery Selektoren:

http://docs.jquery.com/Selectors

9

Wenn Sie den Link, anstatt es zu deaktivieren entfernen möchten:

jQuery('#path .to .your a').each(function(){ 
    var $t = jQuery(this); 
    $t.after($t.text()); 
    $t.remove(); 
}); 

Hinweise:

  • Sie können auch Funktion (k, v) verwenden, um einen Iterator a zu erfassen nd das Element ohne Verwendung von ‚this‘
  • Fühlen Sie sich frei jQuery mit $ zu ersetzen, wenn Sie den Standard-Namespace verwenden
  • var $ t = jQuery (this) ist eine Cache-Funktion, die das Element verweist und hilft auch aufzuräumen die Code
  • Es ist eine gute Praxis, Variablen, die eigentlich jQuery-Elemente sind, mit einem $ voranzutreiben, damit sie optisch im Code getrennt bleiben. Es hilft Ihnen auch zu erkennen, dass Sie Methoden für sie aufrufen können.
  • 1

    Die einfachste Möglichkeit, Anker zu deaktivieren, ist die Verwendung von disabled-attribute, aber Problem ist das angegebene Attribut wird nur von IE unterstützt. In FireFox wird es beispielsweise nicht funktionieren. Wenn Sie möchten, dass Ihr Code in verschiedenen Browsern funktioniert, können Sie versuchen, die Werte der href- und onclick-Attribute in anderen benutzerdefinierten Attributen zu speichern und dann href="#" und onclick="return false;" festzulegen. Wenn Sie zurück aktivieren, sollten Sie die gespeicherten Werte von href und onclick wiederherstellen. Für den visuellen Effekt können Sie die Specila CSS-Klasse anwenden.Ich habe diesen Ansatz in meinem Blog beschrieben - Disable hyperlink