Форум

Igorsrt · #1 (**permalink**) 12.01.2019, 13:13

Здравствуйте!
Есть примерно такой код:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<style>
			.hide-blocks-facty li {
			display: none;
			list-style: none;
			border: 2px solid #b463b2;
			padding-top: 10px;
			font-size: 13px;
			}
		</style>
	</head>
	<body>
		<div id="facty">
			<ul class="blockfactywithimage">
				<li>Впечатляющий стаж работы</li>
				<li>Эксклюзивный дизайн</li>  
				<li>Гарантии качества</li>        
				<li>Собственное производство</li>      
				<li>Оперативная работа онлайн</li>       
				<li>Выезд к клиенту</li>      
                <li>Изделия под ключь</li>
			</ul>
			<div class="hide-blocks-facty">
				<ul class="margintop0" style="width: 1173px;">
					<li><p>Более 11 лет мы работаем с клиентами в текстильной индустрии, каждый год подтверждая свой профессионализм.</p></li>
					<li><p>С вами работает персональный дизайнер, индивидуально разрабатывая модели только под ваш интерьер.</p></li>
					<li><p>Размещая заказ у нас, вы получаете комплект официальных документов, являющихся для вас юридической гарантией качества нашей работы.</p></li>
					<li><p>Каждое изделие изготавливается по индивидуальному лекалу по европейским стандартам, под тщательным руководством опытного технолога.</p></li>
					<li><p>Мы экономим ваше время! Принимайте решения, согласовывайте дизайн штор и текстиль в онлайн-режиме не отрываясь от своих дел.</p></li>
					<li><p>Мы заботимся о вашем комфорте, поэтому наши специалисты приедут к вам на встречу в любую точку Москвы и Московской области.</p></li>
					<li><p>Мы оказываем комплексное текстильное оформление, начиная от замера и заканчивая установкой готовых изделий.</p></li>
				</ul>
			</div>
		</div>
		<script>
			$(document).ready(function() {	
				$("#facty .blockfactywithimage li:nth-child(1)").hover(function() {
					activeTHis(this);
					$(".hide-blocks-facty li:nth-child(1)").fadeIn();
					$(this)
					.closest("ul")
					.find("li")
					.hasClass("activex");
				});
				
				$("#facty .blockfactywithimage li:nth-child(2)").hover(function() {
					activeTHis(this);
					$(".hide-blocks-facty li:nth-child(2)").fadeIn();
					$(this)
					.closest("ul")
					.find("li")
					.hasClass("activex");
				});
				
				$("#facty .blockfactywithimage li:nth-child(3)").hover(function() {
					activeTHis(this);
					$(".hide-blocks-facty li:nth-child(3)").fadeIn();
					$(this)
					.closest("ul")
					.find("li")
					.hasClass("activex");
				});

				$("#facty .blockfactywithimage li:nth-child(4)").hover(function() {
					activeTHis(this);
					$(".hide-blocks-facty li:nth-child(4)").fadeIn();
					$(this)
					.closest("ul")
					.find("li")
					.hasClass("activex");
				});
				$("#facty .blockfactywithimage li:nth-child(5)").hover(function() {
					activeTHis(this);
					$(".hide-blocks-facty li:nth-child(5)").fadeIn();
					$(this)
					.closest("ul")
					.find("li")
					.hasClass("activex");
				});
				
				$("#facty .blockfactywithimage li:nth-child(6)").hover(function() {
					activeTHis(this);
					$(".hide-blocks-facty li:nth-child(6)").fadeIn();
					$(this)
					.closest("ul")
					.find("li")
					.hasClass("activex");
				});
				
				$("#facty .blockfactywithimage li:nth-child(7)").hover(function() {
					activeTHis(this);
					$(".hide-blocks-facty li:nth-child(7)").fadeIn();
					$(this)
					.closest("ul")
					.find("li")
					.hasClass("activex");
				});
				$(".hide-blocks-facty ul").css("width", $(".blockfactywithimage").width());
			}); //ready
			
			function activeTHis(a) {
				$("#facty .blockfactywithimage li").removeClass("activex");
				$(a).addClass("activex");
				$(".hide-blocks-facty li").hide();
			}
		</script>	
	</body>
</html>

Т.е. при наведении на элемент списка, внизу должно появляться его описание, соответсвенно когда убираем мышку - описание должно пропадать.
Проблема в том, что если двигаем мышку быстро, то появляется сразу несколько описаний снизу. Как это можно поправить?

laimas · #2 (**permalink**) 12.01.2019, 13:54

Вообще-то сначала надо убрать лишние обработчики, они у вас все одинаковы, хватит одного на все элементы.

Igorsrt · #3 (**permalink**) 12.01.2019, 14:12

Сообщение от laimas

Вообще-то сначала надо убрать лишние обработчики, они у вас все одинаковы, хватит одного на все элементы.

на самом деле, там еще картинки должны подставляться разные в этих обработчиках

$("#facty .blockfactywithimage li:nth-child(5)").hover(function() {
        activeTHis(this);
        defaulImg();
        $(".hide-blocks-facty li:nth-child(5)").fadeIn();
        $(this)
            .closest("ul")
            .find("li")
            .hasClass("activex");
        $("#facty ul li:nth-child(5) img").attr(
            "src",
            "/assets/templates/texti/images/icon6h.png"
        );
    });

laimas · #4 (**permalink**) 12.01.2019, 14:16

Сообщение от Igorsrt

там еще картинки должны подставляться разные в этих обработчиках

Это не повод клонировать обработчики, есть у элементов набора индексы, этого вполне хватит:

$(document).ready(function() {	
    
    $("ul.blockfactywithimage li").mouseenter(function() {
        $('ul.margintop0 li').eq($(this).addClass('activex').index()).fadeIn();
    }).mouseleave(function() {
        $('ul.margintop0 li').eq($(this).removeClass('activex').index()).hide();
    });
				
    $(".hide-blocks-facty ul").css("width", $(".blockfactywithimage").width());

});

этот код выполняет ровно тоже, что и все ваши обработчики. Не проблема еще и картинки обрабатывать и все что угодно. mouseenter и mouseleave вместо hover для того, чтобы не возникало куча событий при движении в пределах самих LI.

laimas · #5 (**permalink**) 12.01.2019, 14:28

А после того как убедились, что это так, решаем проблему, а для этого нужно завершать запущенные анимации методом .stop(). Строка 4 в коде должна быть такой:

$('ul.margintop0 li').stop().eq($(this).addClass('activex').index()).fadeIn();

laimas · #6 (**permalink**) 12.01.2019, 14:37

Ну и последнее замечание - не кажется ли вам, что методы addClass и removeClass в коде лишнее и это вполне может решить ul.margintop0 li:hover?

Igorsrt · #7 (**permalink**) 12.01.2019, 22:15

спасибо, mouseenter работает действительно лучше чем hover...
Про остальное, с Вами тоже полностью согласен )

laimas · #8 (**permalink**) 13.01.2019, 06:28

Ну тогда еще вопрос - а зачем в отображаемом LI подгружать иконку по его показу, вместо того чтобы иметь ее уже загруженной?

Malleys · #9 (**permalink**) 13.01.2019, 09:01

Я бы хотел обратить внимание на ваш HTML-код. Чтобы вам добавить/удалить/вставить новую пару, состоящую из заголовка и описания, придётся менять в двух местах. Притом придётся учитывать позицию элементов в списке. Это очень сложное дело! Вы можете запутаться и вам придется проверять весь список! Почему бы заголовок и описание не хранить рядом?

Я уменьшил ваш JavaScript путём использования анимации CSS. Также была добавлена поддержка для клавиатуры и сенсорных экранов.

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<style>
			
			#facts {
				display: grid;
			}
			
			#facts dt {
				display: list-item;
				margin-left: 2.5em;
				cursor: default;
			}
			
			#facts dt:hover + dd, 
			#facts dt:focus + dd {
				opacity: 1;
			}
			
			#facts dd {
				order: 1;
				border: 2px solid #b463b2;
				background: #eee;
				padding: 1em;
				opacity: 0;
				transition: opacity 500ms;
				grid-row-end: 9999;
				grid-column: 1 / -1;
				pointer-events: none;
				align-self: start;
			}
			
		</style>
	</head>
	<body>
		<dl id="facts">
			<dt>Впечатляющий стаж работы</dt>
			<dd>
				Более 11 лет мы работаем с клиентами в текстильной индустрии,
				каждый год подтверждая свой профессионализм.
			</dd>
			
			<dt>Эксклюзивный дизайн</dt>
			<dd>
				С вами работает персональный дизайнер, индивидуально
				разрабатывая модели только под ваш интерьер.
			</dd>
			
			<dt>Гарантии качества</dt>
			<dd>
				Размещая заказ у нас, вы получаете комплект официальных
				документов, являющихся для вас юридической гарантией качества
				нашей работы.
			</dd>
			
			<dt>Собственное производство</dt>
			<dd>
				Каждое изделие изготавливается по индивидуальному лекалу
				по европейским стандартам, под тщательным руководством
				опытного технолога.
			</dd>
			
			<dt>Оперативная работа онлайн</dt>
			<dd>
				Мы экономим ваше время! Принимайте решения, согласовывайте
				дизайн штор и текстиль в онлайн-режиме не отрываясь
				от своих дел.
			</dd>
			
			<dt>Выезд к клиенту</dt>
			<dd>
				Мы заботимся о вашем комфорте, поэтому наши специалисты
				приедут к вам на встречу в любую точку Москвы
				и Московской области.
			</dd>
			
			<dt>Изделия под ключ</dt>
			<dd>
				Мы оказываем комплексное текстильное оформление, начиная
				от замера и заканчивая установкой готовых изделий.
			</dd>
		</dl>
		<script>
		
			for(const element of document.querySelectorAll("#facts dt"))
				element.tabIndex = 0;
		
		</script>
	</body>
</html>

Вместо тройки элементов (dl, dt, dd) можно использовать, например, (section, h2, p)

Igorsrt · #10 (**permalink**) 13.01.2019, 09:58

Сообщение от laimas

Ну тогда еще вопрос - а зачем в отображаемом LI подгружать иконку по его показу, вместо того чтобы иметь ее уже загруженной?

Скажу честно, это не мой код (к тому же здесь он упрощен, на сайте все немного по другому). Раньше эти вкладки менялись по клику, захотели что бы при наведении... Хотелось сделать это все с минимальными усилиями - mouseenter помог. Еще раз всем спасибо.

Форум

Справочник

Discord чат

Курсы javascript