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显示时更改，然后显示它具有“隐藏相关产品”并显示不同的图标崩溃。然后，如果我崩溃它，它会回到查看相关产品并有加号图标。

是否可以将它添加到我已经拥有的jquery中？

这听起来很直接，但让我跑来跑去。

感谢

Answer 1

你可以尝试这样的事情（假设多个parent（）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");

jquery切换html文本

3 个答案: