Question

我使用这些行来隐藏一些元素：

function isActive()
{
     $("#id1").hide();
     $("#id2").show();
}

但我需要更改上面的行以根据bool值调整或隐藏元素：

function isActive(toShow)
{
     $("#id1").hide();
     $("#id2").show();
}

实施它的最佳方式是什么？

Answer 1

使用$.fn.toggle(Boolean: display)：

function isActive(toShow)
{
     $("#id1").toggle(!toShow);  // Hide when toShow = true, show when toShow = false
     $("#id2").toggle(!!toShow); // Hide when toShow = false, show when toShow = true
}

确保toShow是布尔值非常重要。

Answer 2

这是更好的方法，但最好的方法是设置事件处理程序和使用类：

$(function () {
  $(".cont").hide();
  $(".trig").click(function () {
    $(".cont").hide();
    $($(this).attr("href")).show();
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<a class="trig" href="#id-1">Display 1</a>
<a class="trig" href="#id-2">Display 2</a>
<a class="trig" href="#id-3">Display 3</a>
<div id="id-1" class="cont">Contents of Item 1</div>
<div id="id-2" class="cont">Contents of Item 2</div>
<div id="id-3" class="cont">Contents of Item 3</div>

如果您正确设置了两个元素（一个隐藏，一个可见），您只需使用以下代码切换其可见性：

$("#id1, #id2").toggle();

它的演示将是：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<a href="#" onclick='$("#id1, #id2").toggle(); return false;'>Toggle Display</a>
<div id="id1" style="display: none;">Contents of Item 1</div>
<div id="id2">Contents of Item 2</div>

注意：上述内容仅适用于两者，而且编码非常难。

jquery show bolay元素根据布尔值boolean

2 个答案: