Область видимости переменной
Всем привет, есть код с разными типами чекбоксов. Для одноого типа все работает ок. Но когда добавляю остальные в мой массив не записываються значения инпутов. Подскажите где обибка...
<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, время: 13:02. |