Функция выполняется ++ раз
Всем привет.
Есть функция, которая отслеживает клики в списках и производит некоторые действия. По сути при помощи этой функции список становится аналогом select. Есть 3 блока таких списков, у каждого свой класс прописан. Соответсвенно в функции 3 блока, отслеживающие клик в конкретном блоке. В каждом блоке прописал console.log Все сделал, все считает как надо, но в консоли заметил такую штуку. При первом срабатывании функции в консоль выводится 1 сообщение. Потом 2 одинаковых. Потом 3 одинаковых. И так количество одинаковых выводов в консоль растет постоянно. Начинаешь по другим спискам "ходить", вообще непонятное количество записей выводится одинаковых. Хотя по сути должна 1 раз вывести. Помогите разрбраться, пожалуйста. Функция (для примера убрал лишние блоки, оставил функцию в чистом виде, без моих добавлений) Все равно в консоли выводится сообщение ++раз
$('.slct').click(function(){
var dropBlock = $(this).parent().find('.drop');
if( dropBlock.is(':hidden') ) {
dropBlock.slideDown();
$(this).addClass('active');
$('.drop').find('li').click(function(){
var selectResult = $(this).find('a').text();
$(this).parent().parent().find('input').val(selectResult);
$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
dropBlock.slideUp();
console.log(selectResult);
});
} else {
$(this).removeClass('active');
dropBlock.slideUp();
}
return false;
});
Пример списка
<div class="select">
<a href="javascript:void(0);" class="slct">Прямоугольные стеллы</a>
<ul class="drop drop_stella">
<li><a>Прямоугольные стеллы</a></li>
<li><a>Резные стеллы</a></li>
<li><a>Двойник</a></li>
</ul>
<input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
</div>
|
the_little,
клик в клике не назначают!!! |
кастомизация селекта
the_little,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.drop{
display: none;
}
li.active{
background-color: #D3D3D3;
}
body{
display: flex;
}
.select{
margin: 0 auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".select").on("click", ".slct, li", function(event) {
event.preventDefault();
var parent = event.delegateTarget;
$(".drop", parent).slideToggle();
if ($(this).is("li")) {
event.stopPropagation();
$(this).addClass("active").siblings().removeClass("active");
var title = this.textContent.trim();
$(".slct", parent).text(title);
$("input", parent).val(title)
}
}).find("li:first").addClass("active");
$(document).click(function(event) {
$(event.target).closest(".select").length || $(".select .drop").slideUp()
})
});
</script>
</head>
<body>
<div class="select">
<a href="#" class="slct">Прямоугольные стеллы</a>
<ul class="drop drop_stella">
<li><a>Прямоугольные стеллы</a></li>
<li><a>Резные стеллы</a></li>
<li><a>Двойник</a></li>
</ul>
<input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
</div>
<div class="select">
<a href="#" class="slct">Прямоугольные стеллы</a>
<ul class="drop drop_stella">
<li><a>Прямоугольные стеллы</a></li>
<li><a>Резные стеллы</a></li>
<li><a>Двойник</a></li>
</ul>
<input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
</div>
</body>
</html>
|
Огромное спасибо!
Работает как надо, за исключением некоторых моментов, которые я частично смог доработать, какие-то нет. Поскольку у меня при работе с разными списками должны отрабатывать разные функции, то я добавил внутри функции if. Работает. И еще пара момент. При нажатии на a.slct - этой ссылке должен присваиваться .active Я вроде смог это прописать. А вот убрать его получилось не во всех случаях. 1) Если клик по странице вне списка - сделал, убирается, хорошо. 2) Если нажать на элемент списка (выбрать новый пункт) - тоже убирается, хорошо. 3) Если открыть список и нажать на a.slct, т.е. не менять выбранный, то класс active у .slct остается. и еще момент, не знаю на сколько это можно реализовать... Когда список закрывается - то снимается класс active у .slct. Поскольку при стилизации меняется border-radius, то при сворачивании списка - получается не красиво. МОжно ли как-то удаление класса active у .slct отложить на время сворачивания. Можно было бы задержку какую-то выставить вручную, но проблема в том что длина списков разная. Где-то 1 пункт, где-то 10-50. Соответсвенно время сворачивания разное. Вот что у меня сейчас получилось.
$(function() {
$(".select").on("click", ".slct, li", function(event) {
event.preventDefault();
$(this).parent().find(".slct").addClass("active");
var parent = event.delegateTarget;
$(".drop", parent).slideToggle();
if ($(this).is("li")) {
event.stopPropagation();
$(this).addClass("active").siblings().removeClass("active");
var title = this.textContent.trim();
$(".slct", parent).text(title);
$("input", parent).val(title);
calculate();
if ($(this).parent().hasClass("drop_model")) {
selectLiImageNumber(title)
checkSizeRadio();
} else if ($(this).parent().hasClass("drop_stella")) {
showModelUl();
checkSizeRadio();
}
$(".slct").removeClass("active");
}
}).find("li:first").addClass("active");
$(document).click(function(event) {
$(event.target).closest(".select").length || $(".select .drop").slideUp() && $(".slct").removeClass("active");
});
});
|
the_little,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.drop{
display: none;
}
li.active{
background-color: #D3D3D3;
}
body{
display: flex;
}
.select{
margin: 0 auto;
}
.slct.active{
background-color: #EEE8AA;
border-radius: 8px;
padding: 4px 6px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".select").each(function(i, parent) {
var a = $(".slct", parent);
var drop = $(".drop", parent);
var input = $("input", parent);
$(parent).on("click", ".slct, li", function(event) {
event.preventDefault();
drop.slideToggle(800, function() {
$(this).is(":hidden") && a.removeClass("active")
});
$(this).addClass("active");
if ($(this).is("li")) {
event.stopPropagation();
$(this).siblings().removeClass("active");
var title = this.textContent.trim();
a.text(title);
input.val(title)
}
})
}).find("li:first").addClass("active");
$(document).click(function(event) {
$(event.target).closest(".select").length ||
$(".slct.active").click()
})
});
</script>
</head>
<body>
<div class="select">
<a href="#" class="slct">Прямоугольные стеллы</a>
<ul class="drop drop_stella">
<li><a>Прямоугольные стеллы</a></li>
<li><a>Резные стеллы</a></li>
<li><a>Двойник</a></li>
</ul>
<input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
</div>
<div class="select">
<a href="#" class="slct">Прямоугольные стеллы</a>
<ul class="drop drop_stella">
<li><a>Прямоугольные стеллы</a></li>
<li><a>Резные стеллы</a></li>
<li><a>Двойник</a></li>
</ul>
<input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:29. |