JQuery переключения HTML текст

Question

Я пытаюсь показать скрытые DIV, который срабатывает с помощью тега мыши:

Кнопка Код выглядит следующим образом:

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

Вот мой JQuery, когда я нажимаю кнопка:

// 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 работает просто отлично, но я также хочу, чтобы изменить текст на ссылку, чтобы изменить, когда DIV показывает, чтобы затем показать это «Скрыть Сопутствующие товары "и показать объявление ifferent icon to collapse. Затем, если я скрою его, он вернется к чтению «Просмотр сопутствующих товаров» и имеет значок «плюс».

Любой способ добавить его в 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");