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

usergeyv

Знаток
Регистрация
5 Июл 2013
Сообщения
152
Реакции
25
Как объединить скрипты 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(', '));
});
});

Для просмотра ссылки Войди или Зарегистрируйся
 
всем нужным инпутам задай один класс
 
ну используй дополнительно 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)
})
 
Во-первых можно и нужно убрать повторный вызов 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);
})

Для просмотра ссылки Войди или Зарегистрируйся
 
а если я так сделаю, данные с нужных checkbox будут передаваться в нужный input type="text" ?
Конечно, функционально одинаковым элементам нужно назначать одинаковый класс. Но даже без этого весь ваш код для любого количества таких инпутов:
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.
 
Назад
Сверху