折叠2个div而不是1个Jquery

时间:2018-02-18 04:17:26

标签: javascript jquery html

我有一个按钮,根据购物车是满的还是空的来调用div

<a class="basket-btn btnCollapse basket-desk" type="button" title="VIEW SHOPPING BAG" onclick="minicart.noactive(this);" id="bag-customer">
    <span id="header-cart-item-count" 
    data-cart-count="<?php echo $numCartItems ? $numCartItems : 0; ?>">
        [<?php echo $numCartItems ? $numCartItems : 0; ?>]
    </span>
</a>
div是:

<div class="row row-links collapse" id="rowSBag" >
            <?php $this->renderPartial('//partial/shop_bag_header'); ?>
</div>

<div class="row row-links collapse" id="rowSBagEmpty">
            <?php $this->renderPartial('//partial/empty_shop_bag_header'); ?>
</div>

问题是如果在行李空的时候单击按钮会显示正确的div rowSBagEmpty但是如果我点击按钮(行空),那么我添加了一个产品,我的脚本显示我的两个div rowSBagEmptyrowSBag而不是最后一个。

我的脚本如下:

var minicart = {
    init: function() {
        var count = $('#header-cart-item-count').data('cart-count');
        minicart.show(count);
    },
    show: function(products) {
        if (products > 0) {
            $('#header-cart-item-count').parent().attr('data-target', '#rowSBag');
        } else {
            $('#header-cart-item-count').parent().attr('data-target', '#rowSBagEmpty');
        }
    },
    noactive: function(button) {
        setTimeout(function() {
            $(button).removeClass('active');
        }, 1);

    },
    expand: function() {
        $.get('/cart')
            .done(function(page) {
                var content = $(page).find('#rowSBag').html();
                $('#rowSBag').html(content);
                var parent = $('#header-cart-item-count').parent();
                $('#rowSBagEmpty').remove();
                $(parent).trigger('click');
                $('#rowSBag .info').css('display','none');
                $('#AddToCart').attr('disabled', false).removeClass('btnSecondary').html('Agregar al carrito');
                $('#addedtobag_ok').fadeIn();
                setTimeout(function() {
                    $('#rowSBagEmpty').remove();
                    $('#rowSBag').collapse('toggle');
                }, 2000);
            });
    }
};

$(document).ready(function() {
    minicart.init();
}); 

我尝试删除div BagEmpty,但如果我执行此操作,则div rowSBag只会显示但不会隐藏timeout

1 个答案:

答案 0 :(得分:0)

你只是在显示div,而不是隐藏任何div。所以我想如果你添加&#39;隐藏&#39;功能也会起作用。

        var minicart = {
        init: function() {
            var count = $('#header-cart-item-count').data('cart-count');
            minicart.show(count);
        },
        hide: function(products) {
            if (products > 0) {
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBagEmpty');
            } else {            
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBag');
            }
        },    
        show: function(products) {
            if (products > 0) {
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBag');
            } else {
                $('#header-cart-item-count').parent().attr('data-target', '#rowSBagEmpty');
            }
        },
        noactive: function(button) {
            setTimeout(function() {
                $(button).removeClass('active');
            }, 1);

        },
        expand: function() {
            $.get('/cart')
                .done(function(page) {
                    var content = $(page).find('#rowSBag').html();
                    $('#rowSBag').html(content);
                    var parent = $('#header-cart-item-count').parent();
                    $('#rowSBagEmpty').remove();
                    $(parent).trigger('click');
                    $('#rowSBag .info').css('display','none');
                    $('#AddToCart').attr('disabled', false).removeClass('btnSecondary').html('Agregar al carrito');
                    $('#addedtobag_ok').fadeIn();
                    setTimeout(function() {
                        $('#rowSBagEmpty').remove();
                        $('#rowSBag').collapse('toggle');
                    }, 2000);
                });
        }
    };