Question

如何让标签切换显示/隐藏？下面是我的代码，目前它也显示show。我希望它从show转换为hide，从hide转回show。当show显示时，div将被隐藏但是当点击show时，标签将切换为hide并显示div，当点击hide时，标签将返回显示并且div将被隐藏

  <html>
 <head>
<title>jQuery test page</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
 $("#textBox").toggle();
});
});
</script>
</head>
<body>
<label id="clickMe">Show</label>
<br />
<div id="textBox" style="display: none">This text will be toggled</div>
</body>
</html>

Answer 1

如果我正确地阅读了您的问题，那么我认为以下内容可行：

$('#clickMe').toggle(
            function(){
                $('#textBox').show();
                $('#clickMe').text('hide');
            },
            function(){
                $('#textBox').hide();
                $('#clickMe').text('show');
            });

JS Fiddle demo

如果您使用属性for，要定义label'连接'的元素，并使用类名，那么这可以更通用和有用：

$('.clickMe').toggle(
            function(){
                $('#' + $(this).attr('for')).show();
                $(this).text('hide');
            },
            function(){
                $('#' + $(this).attr('for')).hide();
                $(this).text('show');
            });

JS Fiddle demo

但请记住，label元素用于将信息与特定input元素相关联，而不是任意元素的通用标识符。理想情况下，您应该使用span或div元素而不是label来实现此目的。

如果您确实切换到使用非label元素，那么也不应该使用for属性，在我建议的位置（假设当前的label之间存在相同的连接{1}}和div）使用自定义data-*属性（例如data-for）来识别关系。

另请注意，在上述最后一个示例中，使用class代替id选择器，因为id 必须是唯一的 在文档中。

Answer 2

使用Toggle with call功能：http://api.jquery.com/toggle-event/

然后，您可以在每个回调中设置标签的文本。

这里answer讨论了不同的toggle api调用。

Answer 3

在切换之前或之后添加以下代码。

http://jsfiddle.net/UuADb/

label = $(this);
if(label.html()=="Show"){
    label.html('Hide');
}else{
    label.html('Show');
}

jquery切换标签

3 个答案: