jQuery 隐藏/显示元素

Question

我有两个元素cols3和cols4。如果其中一个被隐藏，那么通过点击按钮可以显示该元素。 但是如果两个元素都被隐藏，那么只有单击按钮才会显示元素col3。

我尝试使用以下代码： 但是如果两个元素都被隐藏，单击按钮会同时显示它们，而不仅仅是cols3。

有什么帮助吗？

$('#plusexp').click(function() {
    if ($('.cols3:visible')) {
        if ($('.cols4:hidden')) {
            $('.cols4').show();
        }
    }
    if ($('.cols3:hidden')) {
        $('.cols3').show();
    }
});

- Paramasivan

Answer 1

如果你想要检查一个东西是否存在，使用.length属性。这个属性包含了与选择器相匹配的元素数量。

观看this jsfiddle，你会发现如果不使用.length，无论是否有元素，都会得到true。

编辑：

重新思考后（阅读你的描述、代码及你真正想要实现的目标），我的意见是你的代码应该如下所示（参见this jsfiddle）：

$('#plusexp').click(function() {
    var $cols3 = $('.cols3');
    if ($cols3.is(':visible')){
        $('.cols4').show();
    };
    $cols3.show();
});

原因是：

• 你仍然显示cols3，因为：

  • 如果cols3和cols4都可见，则显示cols3，
  • 如果只有一个被显示，则显示此元素（如果这是cols3，则显示它，但如果这是cols4，那么显示cols3不会改变任何东西），

• cols4仅在单击前cols3可见时显示（如果两者都不可见，则仅显示cols3），

• 最好缓存元素（在这种情况下只有一个变量：$cols3），

- Tadeck

Answer 2

试试这个：

$('#plusexp').click(function() {
    if ($('.cols3').is(':hidden')) {
        $('.cols3').show();
    } else {
        if ($('.cols4').is(':hidden')) {
            $('.cols4').show();
        }
    }
});

示例：http://jsfiddle.net/jN7bc/

- DiogoDoreto

Answer 3

尝试这段代码。

$('#plusexp').click(function() {
    if ($('.cols4:hidden')) {
        $('.cols3').show();
    }
    else 
        $('.cols4').show();
    }        
});

- Ali Foroughi

Answer 4

这是一个完美的修复：

$('#plusexp').click(function() {
var f = $('.cols4').is(":hidden") ? "show" : "hide";
    if (f == 'hide' || f == 'Hide') {
       $('.cols3').show();
       $('.cols4').hide();
    }
    if (f == 'show' || f == 'Show') {
       $('.cols4').show();
       $('.cols3').hide();
    }
});

还有演示。 这是一个易于使用的编辑代码：D。

- Shawn31313