Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.12.2018, 02:56
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

Функция выполняется ++ раз
Всем привет.

Есть функция, которая отслеживает клики в списках и производит некоторые действия. По сути при помощи этой функции список становится аналогом 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, 09.12.2018 в 02:59.
Ответить с цитированием
  #2 (permalink)  
Старый 09.12.2018, 03:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

the_little,
клик в клике не назначают!!!
Ответить с цитированием
  #3 (permalink)  
Старый 09.12.2018, 03:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

кастомизация селекта
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>
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2018, 15:16
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

Огромное спасибо!

Работает как надо, за исключением некоторых моментов, которые я частично смог доработать, какие-то нет.

Поскольку у меня при работе с разными списками должны отрабатывать разные функции, то я добавил внутри функции 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");
    });
});
Ответить с цитированием
  #5 (permalink)  
Старый 09.12.2018, 16:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Просмотрела исходик jQuery Откорректируйте где не верно taksebe jQuery 5 23.11.2018 22:42
Функция при нажатии срабатывает один раз и больше не работает notOldFagFromRussia Общие вопросы Javascript 3 08.11.2018 19:17
Функция, которая выполняется раз в месяц. pifon Общие вопросы Javascript 1 10.12.2014 21:44
функция и несуществующий id Ankh Элементы интерфейса 4 10.02.2012 23:49
Функция в функции. Обработчики клика. Запутался =) DorianLeroy Общие вопросы Javascript 8 29.09.2011 16:17