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

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