Область видимости переменной
Всем привет, есть код с разными типами чекбоксов. Для одноого типа все работает ок. Но когда добавляю остальные в мой массив не записываються значения инпутов. Подскажите где обибка...
<div class="filterWrap isOpened"> <div class="filterHead">Мастер</div> <ul class="filterBody autor"> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="1" id="filter_ch_1"> <label for="filter_ch_1">Рейпольский А.Д.</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="3" id="filter_ch_2"> <label for="filter_ch_2">Митков Павел</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="2" id="filter_ch_3"> <label for="filter_ch_3">Рудаева Е.Л.</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="4" id="filter_ch_4"> <label for="filter_ch_4">Уркинеев Д.Л.</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="5" id="filter_ch_5"> <label for="filter_ch_5">Гусев Валерий</label> </li> </ul> </div> <div class="filterWrap isOpened"> <div class="filterHead">Категория</div> <ul class="filterBody"> <li> <input type="checkbox" class="checkbox filter1" name="category[]" value="1" id="filter_cc_1"> <label for="filter_cc_1">Живопись</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="category[]" value="2" id="filter_cc_2"> <label for="filter_cc_2">Графика</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="category[]" value="3" id="filter_cc_3"> <label for="filter_cc_3">Изделия</label> </li> </ul> </div> <div class="filterWrap isOpened"> <div class="filterHead">Техника</div> <ul class="filterBody"> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="1" id="filter_ct_1"> <label for="filter_ct_1">Карандаш</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="2" id="filter_ct_2"> <label for="filter_ct_2">Акрил</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="3" id="filter_ct_3"> <label for="filter_ct_3">Акварель</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="4" id="filter_ct_4"> <label for="filter_ct_4">Масло</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="5" id="filter_ct_5"> <label for="filter_ct_5">Тушь</label> </li> <li> <input type="checkbox" class="checkbox" name="style[]" value="6" id="filter_ct_6"> <label for="filter_ct_6">Каменая живопись</label> </li> </ul> </div> $('.filter1').on('click', function() { var arr = []; var cat = []; var style = []; if ($('.autor input[type=checkbox]').on('change')) { $('.autor input[type=checkbox]').on('change', function() { $('input[name="autor[]"]:checked').each(function() { arr.push($(this).val()); }) }) console.log(arr) } else if ($('.category input[type=checkbox]').on('change')) { $('.category input[type=checkbox]').on('change', function() { $('input[name="category[]"]:checked').each(function() { cat.push($(this).val()); }) }) } else if ($('.style input[type=checkbox]').on('change')) { $('.style input[type=checkbox]').on('change', function() { $('input[name="style[]"]:checked').each(function() { style.push($(this).val()); }) }) } if (arr.lenght == 0) { arr.push(val('none')); } if (cat.lenght == 0) { cat.push('none'); } if (style.lenght == 0) { style.push(0); } $.ajax({ url: '/filter', data: {arr: arr, cat: cat, style: style}, type: 'GET', success: function(filter) { var responce = jQuery.parseJSON(filter); if (responce != "") { console.log(filter); $('.category_item').css('display', 'none'); $('.category_items').append(responce.prod); } }, error: function() { alert("Ошибка подключения!"); } }) }); |
vano_mig,
Интересно, а что это вы проверяете? if ($('.category input[type=checkbox]').on('change')) что за .category? И почему назначаете обработчики на изменение после клика по чекбоксу? |
может я неправильно что то сделал, я новичек в js но хотел написать код фильтрации продуктов по разным параметрам из разных категорий.
Согласен с ($('.category input[type=checkbox]')это бред. А как правильно разделить чекбоксы? |
vano_mig,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('.filter1').on('click', function(){ var data = {arr: '[name="autor[]"]:checked', cat: '[name="category[]"]:checked', style: '[name="style[]"]:checked'}; Object.keys(data).forEach(function (key) { var el = document.querySelectorAll(data[key]); //!el.length && (el = [{value : 'none'}]) data[key] = [].map.call(el, function(el) { return el.value }); }); alert(JSON.stringify(data)); /* $.ajax({ url: '/filter', data: data, type: 'GET', dataType : 'json', success: function(filter) { var responce = filter; if (responce != "") { console.log(filter); $('.category_item').css('display', 'none'); $('.category_items').append(responce.prod); } }, error: function() { alert("Ошибка подключения!"); } }) */ }); }); </script> </head> <body> <div class="filterWrap isOpened"> <div class="filterHead">Мастер</div> <ul class="filterBody autor"> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="1" id="filter_ch_1"> <label for="filter_ch_1">Рейпольский А.Д.</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="3" id="filter_ch_2"> <label for="filter_ch_2">Митков Павел</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="2" id="filter_ch_3"> <label for="filter_ch_3">Рудаева Е.Л.</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="4" id="filter_ch_4"> <label for="filter_ch_4">Уркинеев Д.Л.</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="autor[]" value="5" id="filter_ch_5"> <label for="filter_ch_5">Гусев Валерий</label> </li> </ul> </div> <div class="filterWrap isOpened"> <div class="filterHead">Категория</div> <ul class="filterBody"> <li> <input type="checkbox" class="checkbox filter1" name="category[]" value="1" id="filter_cc_1"> <label for="filter_cc_1">Живопись</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="category[]" value="2" id="filter_cc_2"> <label for="filter_cc_2">Графика</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="category[]" value="3" id="filter_cc_3"> <label for="filter_cc_3">Изделия</label> </li> </ul> </div> <div class="filterWrap isOpened"> <div class="filterHead">Техника</div> <ul class="filterBody"> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="1" id="filter_ct_1"> <label for="filter_ct_1">Карандаш</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="2" id="filter_ct_2"> <label for="filter_ct_2">Акрил</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="3" id="filter_ct_3"> <label for="filter_ct_3">Акварель</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="4" id="filter_ct_4"> <label for="filter_ct_4">Масло</label> </li> <li> <input type="checkbox" class="checkbox filter1" name="style[]" value="5" id="filter_ct_5"> <label for="filter_ct_5">Тушь</label> </li> <li> <input type="checkbox" class="checkbox" name="style[]" value="6" id="filter_ct_6"> <label for="filter_ct_6">Каменая живопись</label> </li> </ul> </div> </body> </html> |
Спасибо!
|
Часовой пояс GMT +3, время: 14:17. |