Question

我使用ajaxify为我的shopify集合页面增加了购物车功能。一切正常，但是一旦项目被添加到购物车并显示另一个，我需要隐藏div。 Html看起来像这样

<div class=“col-add-to-cart”>
    <div class="col-add-btn-container">
        <button type="submit" name="add" class="add-to-cart-main" data-add-to-cart="">
            <span data-add-to-cart-text="">Add to cart</span>
        </button>
        <p class="ajaxified-cart-feedback success" style=""><i class="fa fa-check"></i> Added to cart! <a href="/cart">View
            cart</a> or <a href="/collections/all">continue shopping</a>.</p>
    </div>

    <div class="col-container">

        <div class="col-add">
            <div class="expand-icon expanded">
            </div>
            <div class="checkmark">
            </div>
        </div>
    </div>
</div>

和相关的JS

$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success', '<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a> or <a href="/collections/all">continue shopping</a>.', $addToCartForm);
window.setTimeout(function () {
    $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
    $('.col-add-to-cart').find('.expand-icon.expanded').css("display", "none");
    $('.col-add-to-cart').find('.checkmark').css("display", "block");
    _setText($addToCartBtn, _config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);

因为您可以看到我将复选标记设置为display: block并隐藏expand-icon.expanded。这适用于展开图标，因为页面上只有一个具有.expanded类，但它显示了每个产品的所有.checkmark div。我只需要显示与.ajaxified-cart-feedback .success div相同的容器div中的复选标记。我试图用col-add-to-cart container做到这一点，但似乎没有效果。

Answer 1

您需要将查询限制在特定范围内。根据您提供的信息，我无法确定发生了什么，但您可以尝试将$('.col-add-to-cart')替换为$addToCartBtn.closest('.col-add-to-cart')

第一个将使用该类选择页面上的每个元素，从而产生您观察到的效果。第二个将从$addToCartBtn开始（我假设它是一个单独的元素，在您需要的上下文中），找到最接近的父级“col-add-to-cart”，然后允许您“查找”正确的背景。

您也可以尝试从$addToCartForm开始查询。目前尚不清楚它所引用的元素，但如果它适用于_showFeedback，它也可能适用于您的情况。这看起来像这样：$addToCartForm.find('.checkmark').css("display", "block");

ajax购物车成功隐藏div并显示另一个

1 个答案: