jquery切换html文本答案

【问题标题】：jquery toggle html textjquery切换html文本
【发布时间】：2011-06-03 16:44:36
【问题描述】：

我试图显示一个由 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 中？

这听起来很直截了当，但让我四处奔波。

谢谢

【问题讨论】：

标签： jquery html hyperlink toggle

【解决方案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') );
      });
});

【讨论】：

【解决方案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
});

【讨论】：

这似乎不起作用。它打开隐藏的 div 并且不会让我关闭它，单击它时文本也不会改变。
@estern 也许 if 语句方程没有解析为 true，尝试 $(this).is(":visible") 并在 if 语句的第一个代码块（当为真时执行的位）中放置一个警报，然后让我知道它是否应该在它应该执行的时候执行。
@Marcus Whybrow：我在 if 和 else 中都添加了一个警报，但两者都没有弹出。听起来 if 声明没有调用正确的东西。
@estern 啊，不必要的行会导致语法错误。这是var $input = $(this).find(":input"); 下方的行，不用那个试试。
@Marcus Whybrow：感谢您的帮助，我决定使用@Ken Redler 提供的更简单的代码另辟蹊径。干杯

【解决方案3】：

你可能会觉得这有点过时：

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

【讨论】：