jquery несколько функций в одну?

Тема в разделе "JavaScript", создана пользователем usergeyv, 8 июл 2018.

  1. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    131
    Симпатии:
    20
    Как объединить скрипты jquery в один, чтобы не писать его каждый раз для другого input?
    HTML:
    $(document).ready(function() {
    
    var input = $('[name="xfield[god-vyhoda]"]');
    
    
    $(".dropdown a.god-vyhoda").on('click', function() {
    $(".dropdown ul.god-vyhoda").slideToggle('fast');
    });
    $("input[name='xf_god-vyhoda']").change(function () {
        var maxAllowed = 5;
        var cnt = $("input[name='xf_god-vyhoda']:checked").length;
        if (cnt > maxAllowed) {
    
            alert('Выбрано больше ' + maxAllowed + ' элементов!!');
        }
    });
    
    
    $(document).mouseup(function (e) {
    var container = $(".dropdown ul.god-vyhoda");
    if (container.has(e.target).length === 0){
        container.hide();
    }
    });
    $('.dropdown ul.god-vyhoda input[type="checkbox"]').on('click', function() {
    var inputValue, innerObj = {};
    
    if(input.val()) {
    
      inputValue = input.val().split(', ')
    } else {
      inputValue = [];
    };
    
    inputValue.forEach(function(item) {
      innerObj[item] = true;
    });
    
    
    if ($(this).is(':checked')) {
      innerObj[$(this).val()] = true;
    } else {
      delete innerObj[$(this).val()];
    }
    
    inputValue = Object.keys(innerObj);
    input.val(inputValue.join(', '));
    });
    });
    
    ////////////////////////////////////////
    
    
    $(document).ready(function() {
    
    var input = $('[name="xfield[kachestvo]"]');
    
    
    $(".dropdown a.kachestvo").on('click', function() {
    $(".dropdown ul.kachestvo").slideToggle('fast');
    });
    $("input[name='xf_kachestvo']").change(function () {
        var maxAllowed = 5;
        var cnt = $("input[name='xf_kachestvo']:checked").length;
        if (cnt > maxAllowed) {
    
            alert('Выбрано больше ' + maxAllowed + ' элементов!!');
        }
    });
    
    
    $(document).mouseup(function (e) {
    var container = $(".dropdown ul.kachestvo");
    if (container.has(e.target).length === 0){
        container.hide();
    }
    });
    $('.dropdown ul.kachestvo input[type="checkbox"]').on('click', function() {
    var inputValue, innerObj = {};
    
    if(input.val()) {
    
      inputValue = input.val().split(', ')
    } else {
      inputValue = [];
    };
    
    inputValue.forEach(function(item) {
      innerObj[item] = true;
    });
    
    
    if ($(this).is(':checked')) {
      innerObj[$(this).val()] = true;
    } else {
      delete innerObj[$(this).val()];
    }
    
    inputValue = Object.keys(innerObj);
    input.val(inputValue.join(', '));
    });
    });
    Ссылка на Код
     
  2. sol_los

    sol_los

    Регистр.:
    17 окт 2011
    Сообщения:
    340
    Симпатии:
    192
    всем нужным инпутам задай один класс
     
    denverkurt нравится это.
  3. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    131
    Симпатии:
    20
    а если я так сделаю, данные с нужных checkbox будут передаваться в нужный input type="text" ?
     
  4. sol_los

    sol_los

    Регистр.:
    17 окт 2011
    Сообщения:
    340
    Симпатии:
    192
    ну используй дополнительно data параметры.
    у чекбокса

    data-name="name_input"

    Код:
    $('.dropdown ul.god-vyhoda input[type="checkbox"]').on('click', function() {
    var checkbox_val = $(this).val();
    var input_name = $(this).data('name');
    $('input[name="'+input_name+'"]').val(checkbox_val)
    })
     
  5. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    Во-первых можно и нужно убрать повторный вызов ready.
    Во-вторых: можно переписать через потомков или data атрибут, но:
    В-третьи: если надо передавать ещё и доп параметры каждый раз, то можно обернуть в отдельную функцию.

    В итоге получается типа такого
    Код:
    function myInputFN(name) {
        // $('[name="xfield[kachestvo]"]')
        var input = $('[name="xfield['+name+']"]');
        // $(".dropdown a.kachestvo")
        $(".dropdown a."+name).on('click', function() {
            // $(".dropdown ul.kachestvo")
            $(".dropdown ul."+name).slideToggle('fast');
        });
        // $("input[name='xf_kachestvo']")
        $("input[name='xf_"+name+"']").change(function() {
            var maxAllowed = 5;
            // $("input[name='xf_kachestvo']:checked")
            var cnt = $("input[name='xf_"+name+"']:checked").length;
            if (cnt > maxAllowed) {
                alert('Выбрано больше ' + maxAllowed + ' элементов!!');
            }
        });
    
        $(document).mouseup(function(e) {
            // $(".dropdown ul.kachestvo")
            var container = $(".dropdown ul."+name);
            if (container.has(e.target).length === 0) {
                container.hide();
            }
        });
        // $('.dropdown ul.kachestvo input[type="checkbox"]')
        $('.dropdown ul.'+name+' input[type="checkbox"]').on('click', function() {
            var inputValue, innerObj = {};
            if (input.val()) {
                inputValue = input.val().split(', ')
            } else {
                inputValue = [];
            };
    
            inputValue.forEach(function(item) {
                innerObj[item] = true;
            });
    
            if ($(this).is(':checked')) {
                innerObj[$(this).val()] = true;
            } else {
                delete innerObj[$(this).val()];
            }
    
            inputValue = Object.keys(innerObj);
            input.val(inputValue.join(', '));
        });
    }
    Теперь можно вызывать там где надо и сколько раз надо эту функцию
    Код:
    $(document).ready(function() {
        myInputFN('kachestvo');
        myInputFN('god-vyhoda');
    })
    Также можно расширить её, например внести в разные места разные ограничения на количество (внутри функции удалить или написать условие лучше, чтобы он был не обязателен)
    Код:
    function myInputFN(name,maxAllowed) {
    ....
    $("input[name='xf_"+name+"']").change(function() {
         maxAllowed = maxAllowed || 5; // такое изменение позволит переназначать и в то же время по умолчанию будет 5
    ....
    }
    И вызываем
    Код:
    $(document).ready(function() {
        myInputFN('kachestvo',15);
        myInputFN('god-vyhoda');
        myInputFN('drugoimir',100500);
    })
    https://jsfiddle.net/7hkwajLb/6/
     
    usergeyv нравится это.
  6. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    483
    Симпатии:
    323
    Конечно, функционально одинаковым элементам нужно назначать одинаковый класс. Но даже без этого весь ваш код для любого количества таких инпутов:
    HTML:
    $(document).ready(function() {
      $(".dropdown a").on('click', function() {
        $(this).siblings("ul").slideToggle('fast');
      });  
    $(document).mouseup(function (e) {
        var container = $(".dropdown ul");
        if (container.has(e.target).length === 0){
            container.hide();
        }
    });
      $('.dropdown ul input[type="checkbox"]').on('click change', function() {
              var maxAllowed = 5;
            var cnt = $('input[name="'+this.name+'"]:checked').length;
            if (cnt > maxAllowed) {
                alert('Выбрано больше ' + maxAllowed + ' элементов!!');
                $(this).prop('checked', false);
                return false;
            }
        var inputValue = $('input[name="'+this.name+'"]:checked').map(function(){
          return this.value
        }).get();
        $('input[name="xfield['+this.name+']"]').val(inputValue.join(', '));
      });
    });
    если maxAllowed разный, то разумеется из data.
     
    usergeyv нравится это.