2011-01-04 4 views
0

Ich versuche, eine versteckte div zu zeigen, die von einem Tag Klick ausgelöst wird:jquery Toggle html Text

Knopf-Code wie folgt aussieht:

<a href="#" onclick="return false;" class="viewMoreProducts">View Related Products</a> 

Hier ist meine Jquery für, wenn ich das Klicken Button:

// Show Hidden Product Boxes on Expand - More Products and More Link 
$(".viewMoreProducts").click(function() { 
    $(this).parent().parent().parent().find(".moreProductsBox:first").slideToggle(300, function(){ 
     if ($(this).parent().find(".moreProductsBox").is(":visible")){ 
      $(this).find(":input").addClass("visibleCounter"); 

     } 
     if ($(this).parent().find(".moreProductsBox").is(":hidden")){ 
      $(this).find(":input").removeClass("visibleCounter"); 
     } 
    }); 
}); 

ich den Knebel des versteckten div ganz gut arbeiten bekommen, aber ich möchte auch den Text auf der einen Link ändern, wenn das div, es zu zeigen, zeigt sich ändern, dann hat „Verwandte Produkte ausblenden "und Anzeige anzeigen ifferent-Symbol zum Zusammenbruch. Dann, wenn ich es zusammenbringe, geht es zurück zum Lesen von verwandten Produkten und hat das Plus-Symbol.

Irgendeine Möglichkeit, es nur zu der Jquery hinzuzufügen, die ich bereits habe?

Das klingt ziemlich geradlinig, aber gibt mir den Lauf rum.

THanks

Antwort

2

Sie so etwas wie dies versuchen könnte (die mehrere Eltern unter der Annahme() s nicht weiter vereinfacht werden kann):

$(".viewMoreProducts").click(function(){ 
    var that = this; // reference to the <a> 
    $(this).parent().parent().parent() 
     .find(".moreProductsBox:first").slideToggle(300, function(){ 
     var isvisible = $(this).parent().find(".moreProductsBox").is(":visible"); 
     $(this).find(":input").toggleClass('visibleCounter', isvisible); 
     $(that).html((isvisible ? 'Hide It' : 'Show It')); 
     }); 
}); 
+0

Das hat funktioniert, vielen Dank – estern

1
<a href="#" class="viewMoreProducts">View Related Products</a> 

jQuery:

$(".viewMoreProducts").click(function() { 
    var $button = $(this); 
    $(this).parent().parent().parent().find(".moreProductsBox:first").slideToggle(300, function() { 
     var $input = $(this).find(":input"); 
     if ($(this).is(":visible")) { 
      $input.addClass("visibleCounter"); 
      $button.text('Hide Related Products'); 
     } else { 
      $input.removeClass("visibleCounter"); 
      $button.text('View Related Products'); 
     } 
    }); 
    return false; // allows you to remove that onclick attribute 
}); 
+0

Dies scheint nicht zu funktionieren. Es öffnet das versteckte div und das lässt mich nicht schließen, noch ändert sich der Text, wenn Sie darauf klicken. – estern

+0

@estern Vielleicht löst die if-Anweisungsgleichung nicht 'true', versucht' $ (this) .is (": visible") 'und setzt eine Warnung in den ersten Codeblock der if-Anweisung (das Bit, das wann ausführt wahr) und lassen Sie mich wissen, wenn das ausgeführt wird, wenn es sollte. –

+0

@Marcus Whybrow: Ich habe sowohl dem if als auch dem else einen Alarm hinzugefügt, und nichts erscheint für beides. Klingt so, als würde die Erklärung nicht das Richtige sagen. – estern

0

Sie können dies ein bisschen altmodisch finden:

var x = this.innerHTML; 
this.innerHTML = x.replace("show","z").replace("hide","show").replace("z","hide");