jQuery ukrywanie i pokazywanie tekstu

pytanie zadane 8 grudnia 2017 w JavaScript przez MakaBresk Obywatel (1,060 p.)
zamknięte 27 czerwca 2018 przez MakaBresk

Dobry wieczór, mam taki problem, iż nie działa przycisk Pomoc, który ma wyświetlić tekst.

Kod HTML:

<form id = "Dane_Osobowe" action = "" method = "post">
					<p class = "log">Imię:</p><input type = "text" name = "firstname"/>
							<div class = "help1"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy1"><p>Pole: wymagane</p></div>

Kod JS

$(document).ready(function() {
	$(".help1 input").click(function() {
		(".tekst_pomocy1 p").toggle();
	});
});

Znaczniki zamykające w HTML mam, tylko kod jest ucięty.
Proszę o pomoc

komentarz zamknięcia: Rozwiązany problem

komentarz 8 grudnia 2017 przez MakaBresk Obywatel (1,060 p.)

Oczywiście w CSS zdefiniowałem dla tekst_pomocy1 display: none;

komentarz 8 grudnia 2017 przez MakaBresk Obywatel (1,060 p.)

Zrobiłem ten przycisk z podpiętym tylko jquery-1.8.3 i wewnętrznym skryptem - okazało się, że działa. Nawet, jak wstawię całą treść znacznika body z poprzedniego formularza. Zastanawiam się, czy coś z tym nie koliduje. Może sama walidacja formularza?

Wstawiam cały kod HTML

<!doctype html>
	<html>
		<head>
			<title> Dane osobowe </title>
				<meta charset="UTF-8"/>
		
		<link href = "https://fonts.googleapis.com/css?family=Karla" rel ="stylesheet"/>
		<link href = "https://fonts.googleapis.com/css?family=Spectral+SC" rel = "stylesheet"/>
		<link href = "css/global.css" rel = "stylesheet"/>
		
			<script src = "js/dane_osobowe.js"></script>
			<script src = "js/pomoc.js"></script>
			<script src = "js/validate/jquery-1.8.3.js"></script>
			<script src = "js/validate/jquery.validate.js"></script>
			<script src = "js/validate/messages_pl.js"></script>
			
			<script>
				$(document).ready(function()	{
					$("#Dane_Osobowe").validate({
						rules: {
							firstname: {
								required: true
							},
							surname: {
								required: true
							},
							PIN: {
								required: true,
								digits: true,
								minlength: 11,
								maxlength: 11
							}
						},
						messages: {
							firstname: {
								required: "Proszę wpisać imię"
							},
							surname: {
								required: "Proszę wpisać nazwisko"
							},
							PIN: {
								required: "Proszę wpisać PIN",
								digits: "Proszę wpisać tylko cyfry",
								minlength: "Proszę wpisać PIN, który nie jest krótszy niż 11 znaków",
								maxlength: "Proszę wpisać PIN, który nie jest dłuższy niż 11 znaków"
							}
						}
					});
				});
			</script>
		</head>
		
<body>
	<div class = "container">
		<h1>Dane osobowe</h1>
			
			<div class = "styl_formularza">
				<div class = "pola_formularza">
						<form id = "Dane_Osobowe" action = "" method = "post">
					<p class = "log">Imię:</p><input type = "text" name = "firstname"/>
							<div class = "help1"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy1"><p>Pole: wymagane</p></div>
								
					<p class = "log">Nazwisko:</p><input type = "text" name = "surname"/>
							<div class = "help"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy"><p>Pole: wymagane<p></div>
								
					<p class = "log">Płeć:</p><input type = "text" name = "sex"/>
							<div class = "help"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy"><p>Pole: wymagane</p></div>
								
					<p class = "log">Data urodzenia:</p><input type = "text" name = "date"/>
							<div class = "help"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy"><p>Pole: wymagane</p></div>
								
					<p class = "log">Pesel:</p><input type = "text" name = "PIN"/>
							<div class = "help"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy"><p>Pole: wymagane</p></div>
								
					<p class = "log">Ulubiony kolor</p><input type = "text" name = "favouriteColor"/>
							<div class = "help"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy"><p>Pole: wymagane</p></div>
								
					<p class = "log">Zainteresowania</p><input type = "text" name = "zainteresowania"/>
							<div class = "help"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy"><p>Pole: wymagane</p></div>
								
					<p class = "log">Życiorys</p><input type = "text" name = "zyciorys"/>
							<div class = "help"><input type = "button" value = "Pomoc"/></div>
								<div class = "tekst_pomocy"><p>Pole: wymagane</p></div>
				</div>
					<div class = "przyciski">
						<input type = "button" value = "Powrót do strony logowania" onClick = "dane(this.form)"/>
					</div>	
					<div class = "przyciski2">
						<input type = "submit" value = "Sprawdź poprawność formularza"/>
						<input type = "reset" value = "Wyczyść">
					</div>
						</form>
			</div>
</body>
</html>

komentarz 8 grudnia 2017 przez MakaBresk Obywatel (1,060 p.)

Problemu z odczytywaniem plików, nie ma. Wszystkie pliki są w określonych ścieżkach oraz mają taką samą nazwę, jak te w pliku html.

komentarz 8 grudnia 2017 przez MakaBresk Obywatel (1,060 p.)

Znalazłem rozwiązanie: wpisałem skrypt do znacznika head w pliku html. Nasuwa się pytanie dlaczego skrypt nie działał, jako osobny plik js? Czy jest to związane z kolejnością wykonywania skryptów?

Jeszcze jedno pytanie czy mogę skrócić poniższy zapis?

<script>
				$(document).ready(function() {
					$(".help1 input").click(function() {
						$(".tekst_pomocy1").toggle();
					});
					$(".help2 input").click(function() {
						$(".tekst_pomocy2").toggle();
					});
					$(".help3 input").click(function() {
						$(".tekst_pomocy3").toggle();
					});
					$(".help4 input").click(function() {
						$(".tekst_pomocy4").toggle();
					});
					$(".help5 input").click(function() {
						$(".tekst_pomocy5").toggle();
					});
					$(".help6 input").click(function() {
						$(".tekst_pomocy6").toggle();
					});
					$(".help7 input").click(function() {
						$(".tekst_pomocy7").toggle();
					});
					$(".help8 input").click(function() {
						$(".tekst_pomocy8").toggle();
					});
				});
			</script>