JackShcherbakov
@JackShcherbakov

Почему в 1-ом случае мы прописываем each, а во втором все и так работает?

Почему в случае c картинками мы прописываем each, а случае со ссыллками все и так работает?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Сменяемые изображения</title>
<link href="../_css/site.css" rel="stylesheet">
	<style>
		#gallery {
			float: left;
			width: 90px;
			margin-right: 30px;
			margin-left: 10px;
			border-right: white 1px dotted;	
		}
		#gallery img {
			display: inline-block;
			margin: 0 0 10px 0;
			border: 1px solid rgb(0,0,0);
		}
		#photo {
			margin-left: 150px;	
			position: relative;
		}
		#photo img {
			position: absolute;	
		}
	</style>
	<script src="../js/jquery-3.2.1.min.js"></script>

	<script>
		$(document).ready(function() {
				/********************Change to colorful********************/
				$('#gallery img').each(function(){									
					var imgFile = $(this).attr('src');
					var imgExt = /(\.\w{3,4}$)/;
						var preloadImage = new Image();
						preloadImage.src = imgFile.replace(imgExt, '_h$1');
				
					$(this).hover(
						function(){
							$(this).attr('src', preloadImage.src);
						},
						function(){
							$(this).attr('src', imgFile);
					});
				});
				/**********************************************************/
				/********************Change to Big*************************/
					$('#gallery a').click(function(evt){
						evt.preventDefault();
						var imgPath = $(this).attr('href');
						var newImage = $('<img src="' + imgPath + '">');
						var oldImg = $('#photo img');
						newImage.hide();
						$('#photo').prepend(newImage);
						newImage.fadeIn(1000);
						oldImg.fadeOut(1000, function(){
							$(this).remove();
						});
					});/*end click*/
					$('#gallery a:first').click();
				/**********************************************************/
				/********************Change to Big*************************/
				/*	$('#gallery a').click(function(evt){
						evt.preventDefault();
						var imgPath = $(this).attr('href');
						var oldImg = $('#photo img');
						var newImage = $('<img src="' + imgPath + '">');
						newImage.hide();
						$('#photo').prepend(newImage);
						newImage.fadeIn(1000);
						oldImg.fadeOut(1000, function(){
							$(this).remove();
						});
					});/*end click*/
					/*$('#gallery a:first').click();*/
				/**********************************************************/
		});//end ready
	</script>
</head>
<body>
	<div class="wrapper">
		<header>
		   JAVASCRIPT <span class="amp">и</span> jQUERY: НЕДОСТАЮЩЕЕ&nbsp;РУКОВОДСТВО
		</header>
		<div class="content">
			<div class="main">
				<h1>Сменяемые изображения</h1>
				<p>Наведите указатель мыши на изображения</p>
				<div id="gallery"> 
					<a href="../_images/large/blue.jpg"><img src="../_images/small/blue.jpg" width="70" height="70" alt="blue"></a>
					<a href="../_images/large/green.jpg"><img src="../_images/small/green.jpg" width="70" height="70" alt="green"></a>
					<a href="../_images/large/orange.jpg"><img src="../_images/small/orange.jpg" width="70" height="70" alt="orange"></a> 
					<a href="../_images/large/purple.jpg"><img src="../_images/small/purple.jpg" width="70" height="70" alt="purple"></a>
					<a href="../_images/large/red.jpg"><img src="../_images/small/red.jpg" width="70" height="70" alt="red"></a>
					<a href="../_images/large/yellow.jpg"><img src="../_images/small/yellow.jpg" width="70" height="70" alt="yellow"></a></div>
				</div>
				<div id="photo"></div>
			</div>
		</div>
		<footer>
			<p>JavaScript и jQuery: Недостающее Руководство, Дэвид МакФарланд.</p>
		</footer>
	</div>
</body>
</html>
  • Вопрос задан
  • 159 просмотров
Решения вопроса 2
abyrkov
@abyrkov
JavaScripter
Потому, что под капотом click тот же each.
Ответ написан
Комментировать
alvvi
@alvvi
export default apathy;
Потому что для каждой картинки мы хотим сделать опредленные действия, которые и резмещаем в теле callback-функции, передаваемой each.

Когда же мы вызваем .click() у jQuery-объекта с длиной > 1, jQuery сам пройдет циклом по всем элементам и развешает нужные обработчики.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы