jQuery隐藏/显示元素

我有两个元素cols3和cols4。如果其中一个元素被隐藏，则单击按钮将显示该元素。 但如果两个元素都隐藏，则通过单击按钮，仅显示元素col3

我尝试了以下代码： 但如果两者都隐藏，则通过单击按钮，两者都将显示，而不是仅显示cols3

有什么帮助吗

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

---

如果要检查是否存在内容，请使用

.length

属性

.length

属性包含与选择器匹配的元素数

查看而不使用

.length

，无论是否存在某些元素，您都会得到

true

编辑：

在重新考虑这一点（您的描述、您的代码以及您真正想要实现的目标）后，我的意见是您的代码应该如下所示（请参阅）：

原因是:

• 您仍然显示

  cols3

  ，因为：
  • 如果

    cols3

    和

    cols4

    都可见，则显示

    cols3

  • 如果只显示一个，则显示此元素（如果这是

    cols3

    ，则显示它，但如果这是

    cols4

    ，则显示

    cols3

    不会更改任何内容）

• cols4

  仅在单击前可见

  cols3

  时显示（如果两者都不可见，则仅显示

  cols3

  ）

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

  $cols3

  ）

试试这个：

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

这里的示例：

试试这段代码

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

这是一个完美的解决方案：

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

和。 这是一个使用edit:D的简单代码

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