javascript jquery切换标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8320159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery to toggle a label
提问by Juan Almonte
How can I get the label to toggle show/hide? Below is my code and currently it is also displaying show. I would like it to toggle from show to hide and from hide back to show. when show is displayed the div will be hidden but when show is clicked the label will switch to hide and the div will be displayed and when hide is clicked the label will go back to show and the div will be hidden
如何让标签切换显示/隐藏？下面是我的代码，目前它也在显示节目。我希望它从显示切换到隐藏，从隐藏切换回显示。当显示显示时，div 将被隐藏，但当显示被单击时，标签将切换到隐藏并显示 div，当单击隐藏时，标签将返回显示并隐藏 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>
回答by David says reinstate Monica
If I read your question right, then I think the following would work:
如果我正确阅读了您的问题，那么我认为以下方法可行：
$('#clickMe').toggle(
function(){
$('#textBox').show();
$('#clickMe').text('hide');
},
function(){
$('#textBox').hide();
$('#clickMe').text('show');
});
If you use the attribute for, to define the element to which the label'connects', and also use class-names, then this can be made more generic and useful:
如果您使用 , 属性for来定义label“连接”的元素，并且还使用类名，那么这可以变得更通用和有用：
$('.clickMe').toggle(
function(){
$('#' + $(this).attr('for')).show();
$(this).text('hide');
},
function(){
$('#' + $(this).attr('for')).hide();
$(this).text('show');
});
Bear in mind, though, that the labelelement is used to associate information with specific inputelements, as opposed to a generic identifier for arbitrary elements. Ideally, you should use a span, or div, element rather than a labelfor this purpose.
但是请记住，该label元素用于将信息与特定input元素相关联，而不是用于任意元素的通用标识符。理想情况下，您应该为此使用span, 或div元素而不是 a label。
If you do switch to using non-labelelements, then the forattribute shouldn't be used either, in its place I'd suggest (assuming the same connection between what's currently the labeland the div) using a custom data-*attribute (such as data-for) to identify the relationship.
如果您确实切换到使用非label元素，那么for也不应该使用该属性，我建议使用自定义属性（例如）来代替它（假设当前的 thelabel和 the之间具有相同的连接）关系。divdata-*data-for
Note, also, in the above -final- example, the use of the classinstead of the idselector, since an idmust be uniquewithin the document.
还要注意，在上面的 -final- 示例中，使用了class而不是id选择器，因为 an在文档中id必须是唯一的。
回答by Last Rose Studios
add the code below before or after your toggle.
在切换之前或之后添加以下代码。
label = $(this);
if(label.html()=="Show"){
label.html('Hide');
}else{
label.html('Show');
}
回答by Billy Coover
Use the Toogle with callback feature: http://api.jquery.com/toggle-event/
使用带有回调功能的工具：http://api.jquery.com/toggle-event/
Then you can set the text for the label in each callback.
然后您可以在每个回调中设置标签的文本。
The answerhere talks about the different toggle api calls.
这里的答案讨论了不同的切换 api 调用。
