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

【问题标题】：ajax cart success hide div and display anotherajax购物车成功隐藏div并显示另一个
【发布时间】：2018-03-12 00:16:54
【问题描述】：

我正在使用 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 来做到这一点，但似乎没有用。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：