Question

我正在寻找连接这些功能的解决方案。如果有人打开shoppingBag并打开customerAccount，则customerAccount应该隐藏。

感谢您的帮助，

<script>

$(document).ready(function () {

    function change() {
        $('#shoppingBag').css('display', 'block');
    }

    function reset() {
        $('#shoppingBag').css('display', 'none');
    }

    $('.icon-cart').toggle(change, reset);


});

$(document).ready(function () {

    function change() {
        $('.customerAccount').css('display', 'block');
    }

    function reset() {
        $('.customerAccount').css('display', 'none');
    }

    $('.icon-online, .icon-offline').toggle(change, reset);


});  
</script>

Answer 1

您不需要多次编写document.ready，单身就可以。将所有脚本放在document.ready。

中

您甚至可以点击购物车和离线/在线图标，在购物车和客户之间切换。

注意 - 您可以使用jQuery提供的show() / hide()函数，而不是将显示css更改为显示/隐藏。

$(document).ready(function () {

    $('.icon-cart').click(function(){
      $('.customerAccount').hide();
      $('#shoppingBag').toggle();
    });

    $('.icon-online, .icon-offline').click(function(){
      $('.customerAccount').toggle();
      $('#shoppingBag').hide();
    });
});

Answer 2

这将是：

var $shoppingBag = $('#shoppingBag'), // Caching for performance
    $customerAccount = $('.customerAccount'),
    onShow = 1;


$(document).ready(function () { // Only one!! Why two?

    function showOnly1() { // Unique function !!
        $shoppingBag.show();
        $customerAccount.hide();
        onShow = 1;
    }

    function showOnly2() { // Unique function !!
        $shoppingBag.hide();
        $customerAccount.show();
        onShow = 2;
    }

    $('#someButton').click(function(){
       if(onShow==1){
           showOnly2();
       } else {
           showOnly1();
       }
    });


});

如何组合两个切换功能？

2 个答案: