Функция выполняется ++ раз
Всем привет.
Есть функция, которая отслеживает клики в списках и производит некоторые действия. По сути при помощи этой функции список становится аналогом 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. |