Question

以下div是我身体的一部分：

   <div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>
    <br>

我将这个div设计如下：

  #errorSection{
    visibility: hidden;
    text-align: center;
    font-style: bold;
    font-size: 14pt;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

如何在调用以下函数时使用jQuery显示它。我现在的方式就是调用错误。

  function noLocation(){
    $('#errorSection').style.visibility.visible;
  }

Answer 1

保持声明的CSS将是：

$('#errorSection').css('visibility', 'visible');

但是我建议你使用这样的额外CSS声明：

#errorSection.showError {
    visibility: visible;
}

$('#errorSection').addClass('showError');

这意味着您以后可以更改CSS以使用display: none;（甚至height: 0;或position: absolute; left: -99999;），而无需修改您的JavaScript（关注点分离）

Answer 2

简单。你正在混合直接的Javascript和jQuery，这是行不通的。如果使用＆＃39;可见性＆＃39;财产，而不是＆＃39;显示＆＃39;

你应该这样做。

function noLocation(){
   $('#errorSection').css("visibility", "visible");
}

或

function noLocation(){
    $('#errorSection').css({"visibility": "visible", "text-align": "center",
"font-style": "bold"}); //can use comma delimited properties like in a css file sheet in the {} brackets.
 }

Answer 3

jQuery中的不同方式，下面几个：

1）使用css功能

显示：$('#errorSection').css("display", "inline")不同的值可以在inline, block, inline-block
隐藏：$('#errorSection').css("display", "none")

2）或者您可以使用show和hide

显示：$('#errorSection').show()
隐藏：$('#errorSection').hide()

3）拥有css课程，你可以切换以显示/隐藏效果：

 .error {
    display: inline; #or whatever like block, inline-block based on your design 
  }

可以使用以下方式触发显示/隐藏：

$('#errorSection').toggleClass( "error" );

Answer 4

可见性问题已在其他帖子中处理过，我个人会添加/删除像@DJDaveMark建议的类，但jquery中有一个内置的切换功能很有用 - 所以这是提供一个替代方案：简单从隐藏元素开始，然后单击按钮 - 使用toggle（）切换显示。

我使用了一个命名函数，以便您可以在现有代码中轻松使用它，但您可以轻松地将切换放入元素的单击处理程序，就像我在此处放置的按钮一样。

＆＃13;

$('#togglevisibility').click(function(){
 toggleVisibility();
})

function toggleVisibility() {
 $('#errorSection').toggle();
}

＆＃13;

#errorSection{
    display:none;
    text-align: center;
    font-style: bold;
    font-size: 14pt;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="togglevisibility">Click Me To Toggle Visibility</button>
<hr/>

<div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>

＆＃13;

使用jQuery如何使用函数使div对象可见？

4 个答案: