Question

我有2个元素cols3和cols4。如果其中任何一个被隐藏，则单击要显示该元素的按钮。但如果两个元素都被隐藏，那么通过单击按钮，只显示元素col3。

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

有任何帮助吗？

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

Answer 1

如果您要检查是否存在某些内容，使用.length属性。 .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），

Answer 2

试试这个：

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

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

Answer 3

试试这段代码

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

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();
    }
});

Demo。这是一个使用编辑的简单代码：D。

jQuery隐藏/显示元素

4 个答案: