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

는, 그때는 "관련 제품을 숨기기했다 보여 "및 광고 게재 무섭게하는 아이콘. 그런 다음 내가 접히면 관련 제품보기로 돌아가서 더하기 아이콘을가집니다.

이미 jquery에 추가하는 방법은 없나요?

이것은 꽤 똑바로 들리지만 내게 주위를 도망칩니다.

감사

Answer 1

당신은이 같은 (다중 부모 (가정)의 더 단순화 할 수없는)을 시도해 볼 수도 있습니다 조금 구식 일 수 있습니다.

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

Answer 2

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

jQuery를 :

$(".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 3

:

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