JQuery для переключения метки - PullRequest
Новая
       10

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

0 голосов
/ 30 ноября 2011

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

Ответы [ 3 ]

2 голосов
/ 30 ноября 2011

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

$('#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 .

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

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

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

0 голосов
/ 30 ноября 2011

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

http://jsfiddle.net/UuADb/

label = $(this);
if(label.html()=="Show"){
    label.html('Hide');
}else{
    label.html('Show');
}
0 голосов
/ 30 ноября 2011

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

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

Ответ здесь говорит о различных вызовах API переключения.

...