使用jquery更改span的可见性

Question

我在durandal项目工作.我在html中有span和button元素.我想在点击按钮时显示跨度.我的问题是,当我从html隐藏跨度时 - 它无法从javascript中显示它.我在你的网站上看到了这个问题(使用jquery链接更改标签标签的可见性),我尝试了所有的答案 - 任何帮助我.

(我尝试使用: in html:

<span id="mySpan" hidden = "hidden">aaa</span>

要么:

<span id="mySpan" style= "visibility:collapse">aaa</span>

要么:

<span id="mySpan" style= "display:none">aaa</span>

在javascript中:

$("#mySpan").show();

要么:

$("#mySpan").css('visibility', 'visible');

我尝试了所有可选组合 )

注意:我希望您知道,当我不隐藏HTML的范围,并尝试使用toggle()时hide(),show()- 它运行良好.

不起作用的例子:

在html页面上:

    <span id="mySpan" hidden = "hidden">aaa</span>

在javascript页面上:

    $("#mySpan").show();

Answer 1

你的HTML不行!

请记住,跨度以<span></span>这种方式关闭,而不是你关闭它们的方式!这样,只有自闭的元素,如:input,img等被关闭!

试着写这个:

<span id="mySpan">Some text!</span>

CSS将是:

#mySpan {
  display: none; // you're using diaplay!
}

现在使用jQuery使用这个:

$('#mySpan').show()

或这个:

$('#mySpan').css('display', 'block');

Answer 2

好吧,你的代码都错了.

• 该id属性每页只应使用一次.它应该是唯一的,以便您可以将其称为文档中的单个点.您应该将其更改为class="mySpan"然后使用选择它们$(".mySpan").

• visible:collapse是无效的CSS.你可能想要使用visibility,是吗？

• diaplay:none也是无效的CSS.可能是一个错字display,是吗？

• hidden最新的HTML规范中有一个属性(通常称为HTML5).我不确定你是否意识到这一点; 如果您是,并且您正在尝试使用它,那么您应该将以下内容放在CSS文件中,以便它可以在尚未实现它的浏览器中运行:

  *[hidden] {
      display: none;
  }
  

跟进:

好的,您希望能够通过单击按钮来打开和关闭跨度.这样做:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="myButton">Show/hide the span</button><br>
<span id="mySpan" style="display:none">This is a span with some text in it</span>
<script>
$(function() {
    $("#myButton").click(function() {
        $("#mySpan").toggle();
    });
});
</script>