Computer Wiz99 Ответов: 3

Когда я нажимаю на кнопку jquery, она скрывает текст, но когда я нажимаю на нее снова, ничего не происходит. Почему?

У меня есть сайт, который использует jQuery для скрытия и отображения одной кнопкой. Я получил его, чтобы скрыть свой текст, и кнопка меняет свое имя, но я не могу заставить его снова показать текст, и кнопка остается прежней. Я что-то пропустил в своем коде?

Вот мой HTML-код:

<!DOCTYPE html>

<html lang="en">

<head>
	<title>Path of Light Yoga Studio :: Classes</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="jquery/yoga.js" type="text/javascript"></script>
</head>
<body>
	<div id="wrapper">
	<header><h1>Path of Light Yoga Studio</h1></header>
		<p></p>
			<a href="index.html">Home</a>  
			<a href="Classes.html">Classes</a> 
			<a href="Schedule.html">Schedule</a> 
			<a href="Contact.html">Contact</a>
			<a href="Store.html">Store</a>
		<p></p>
	
		<p></p><div id="hero"></div><p></p>
		<br>
			<h2>Yoga Classes</h2>
		<br>
		<dl>
			<dt>Gentle Hatha Yoga</dt>
			<div id="hideme1">Intended for beginners and anyone wishing a grounded foundation in the practice of yoga, 
				this 60 minute class of poses and slow movement focuses on asana(proper alignment and posture),
				pranayama (breath work), and guided meditation to foster your mind and body connection.<p></p></div>
			<br>
			<dt>Vinyasa Yoga</dt>
			<div id="hideme2">Although designed for intermediate to advanced students, geginners are welcome to sampe this 60 minute class 
				that focuses on breath-synchronized movement -- you will inhale and exhale as you flow energetically through 
				yoga poses.<p></p></div>	
			<br>
			<dt>Restorative Yoga</dt>
			<div id="hideme3">This 90 minute class features very slow movement and long poses that are supported by a chair or wall. This calming, 
				restorative experience is suitable for students of any level of experience.
				This practice can be a perfect way to help rehabilitate an injury.<p></p></div>
			
		</dl>
		<button id="hide">Hide Descriptions</button>
	

        Copyright 2016 © Path of Light Yoga<br>
        <a>khopkin5@my.westga.edu</a>

</div>
</body>


Вот мой код jQuery:

$(document).ready(function(){
    $("#hide").click(function(){
        $("#hideme1").show();
			$("#hideme2").show();
				$("#hideme3").show();
					$('#hide').text('Hide Descriptions');				
    });
    $("#hide").click(function(){
        $("#hideme1").hide();
			$("#hideme2").hide();
				$("#hideme3").hide();
					$('#hide').text('Show Descriptions');	
    });
});


Что я уже пробовал:

Я попытался изменить код, перевернув его, и ничего не произошло. Я пытаюсь добавить. toggle, но когда страница загружается, кнопка исчезает, как и текст.

3 Ответов

Рейтинг:
2

Karthik_Mahalingam

попробовать это

$("#hide").click(function () {
               var text = $('#hide').text();
               if (text == 'Hide Descriptions') {
                   $("#hideme1,#hideme2,#hideme3").hide();
                   $('#hide').text('Show Descriptions');
               }
               else {
                   $("#hideme1,#hideme2,#hideme3").show();
                   $('#hide').text('Hide Descriptions');
               }
           });

Рейтинг:
13

Peter Leow

Добавьте окно оповещения к каждой из соответствующих функций, например

$(document).ready(function(){
    $("#hide").click(function(){
        $("#hideme1").show();
   $("#hideme2").show();
    $("#hideme3").show();
     $('#hide').text('Hide Descriptions');
       alert('We are shown.'); // add alert to pause the action
    });
    $("#hide").click(function(){
        $("#hideme1").hide();
   $("#hideme2").hide();
    $("#hideme3").hide();
     $('#hide').text('Show Descriptions');
       alert('We are hidden.'); // add alert to pause the action
    });
});

и посмотрите сами на последовательность действий, генерируемых вашим кодом jQuery. Тогда вы поймете, почему.
На самом деле, вы должны использовать метод jQuery toggle() [^]. Вы также должны использовать селектор классов для трех hideme div вместо id, как вас учили в предыдущем вопросе Почему только один абзац скрывает и показывает, а не все?[^]

Рейтинг:
0

baotdinh

Попробуйте этот код:

$("#hide").click(function(){
       $("#hideme1").toggle();
       $("#hideme2").toggle();
       $("#hideme3").toggle();
        $('#hide').text(function(i, text){
         return text === "Show Descriptions" ? "Hide Descriptions" : "Show Descriptions";
     })
   });

Computer Wiz99

Код переключения, похоже, не работает.

baotdinh

если единственное-не работает :
Используйте этот:
$("#hide"). click (функция(){
var displayStyle = $('#hideme1'). css ('display');

если(свойства стиль отображения значение != "нет"){
$("#hideme1"). скрыть();
$("#hideme2"). скрыть();
$("#hideme3"). скрыть();
$('#скрыть').текст (шоу'описания');
}еще{
$("#hideme1"). показать();
$("#hideme2"). показать();
$("#hideme3"). показать();
$('#hide'). text ('скрыть описания');
}


});