jquery для переключения метки

Как я могу заставить метку переключаться между отображением/скрытием? Ниже мой код, и в настоящее время он также отображает show. Я хотел бы, чтобы он переключался с показа на скрытие и обратно на показ. когда отображается show, div будет скрыт, но при нажатии на show метка переключится на скрытие, и 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>

javascript toggle jquery label
person Juan Almonte    schedule 30.11.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Если я правильно прочитал ваш вопрос, то я думаю, что сработает следующее:

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

демонстрация JS Fiddle.

Если вы используете атрибут for для определения элемента, к которому "подключается" label, а также используете имена классов, то это можно сделать более общим и полезным:

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

демонстрация JS Fiddle.

Имейте в виду, однако, что элемент label используется для связывания информации с конкретными элементами input, в отличие от общего идентификатора для произвольных элементов. В идеале для этой цели следует использовать элемент span или div, а не label.

Если вы переключитесь на использование элементов, отличных от label, то атрибут for также не следует использовать, вместо него я бы предложил (предполагая ту же связь между тем, что в настоящее время является label и div), используя пользовательский атрибут data-* (такой как data-for) для определения отношения.

Обратите также внимание на то, что в вышеприведенном -final- примере используется селектор class вместо селектора id, поскольку id должен быть уникальным в документе.

person David says reinstate Monica    schedule 30.11.2011

arrow_upward
0
arrow_downward

Используйте функцию обратного вызова Toogle: http://api.jquery.com/toggle-event/

Затем вы можете установить текст для метки в каждом обратном вызове.

В ответе здесь рассказывается о различных вызовах toggle API.

person Billy Coover    schedule 30.11.2011

arrow_upward
0
arrow_downward

добавьте приведенный ниже код до или после переключателя.

http://jsfiddle.net/UuADb/

label = $(this);
if(label.html()=="Show"){
    label.html('Hide');
}else{
    label.html('Show');
}
person Last Rose Studios    schedule 30.11.2011