jqueryのトグルhtmlのテキスト

Question

私は、タグのクリックによってトリガーされる隠されたdiv要素を表示しようとしています：私がクリックしたときにここで

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

がための私のjQueryのです：

ボタンのコードは次のようになりますボタン：私は隠されたdiv要素のトグルがうまく働いて得ることができます

// 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"); 
     } 
    }); 
}); 

が、私もそれは「関連製品を非表示にしている表示するには、div要素が表示されているときに変更するには、リンク上のテキストを変更したいです"と広告を表示ifferentアイコンが崩壊する。それから私がそれを崩壊させると、それはView Related Productsを読むために戻り、プラスのアイコンを持っています。

私が既に持っているjqueryに追加する方法はありますか？

これはかなりまっすぐに聞こえますが、周りに走り回っています。

おかげ

Answer 1

あなたは（sがさらに簡素化することができません）複数の​​親を仮定して（）は、このような何かを試みることができる：

$(".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')); 
     }); 
}); 

Answer 2

<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 
}); 

Answer 3

これはちょっと古風な感じです：

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