Question

我在durandal项目工作。我在html中有span和button元素。我想在点击按钮时显示跨度。我的问题是，当我从html隐藏跨度时 - 它无法从javascript中显示它。我在您的网站上看到了这个问题（在链接change visibility of label tag using jquery上），我尝试了所有答案 - 任何帮助我的事情。

（我试过用： in html：

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

或：

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

或：

<span id="mySpan" style= "diaplay: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的错字，是吗？
最新的HTML规范中有一个hidden属性（通常称为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>

Answer 3

似乎是“显示”中的错误？尝试改变：

<span id="mySpan" style="diaplay:none"/>

为：

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

使用jquery更改span的可见性

3 个答案: