jquery 切换 html 文本

Question

我试图显示一个由 a 标签点击触发的隐藏 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 时更改，然后显示它具有“隐藏相关产品”并显示不同的图标以折叠。然后，如果我折叠它，它会返回阅读“查看相关产品”并显示加号图标。

有什么方法可以将它添加到我已有的 jquery 中吗？

这听起来很简单，但却让我感到困惑。

谢谢

Answer 1

你可以尝试这样的事情（假设多个parent()不能进一步简化）：

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