Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Область видимости переменной (https://javascript.ru/forum/events/70650-oblast-vidimosti-peremennojj.html)

vano_mig 22.09.2017 01:01

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

Dilettante_Pro 22.09.2017 15:22

vano_mig,
Интересно, а что это вы проверяете?
if ($('.category input[type=checkbox]').on('change'))

что за .category?

И почему назначаете обработчики на изменение после клика по чекбоксу?

vano_mig 22.09.2017 22:12

может я неправильно что то сделал, я новичек в js но хотел написать код фильтрации продуктов по разным параметрам из разных категорий.
Согласен с
($('.category input[type=checkbox]')
это бред. А как правильно разделить чекбоксы?

рони 22.09.2017 23:32

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>

vano_mig 23.09.2017 13:03

Спасибо!


Часовой пояс GMT +3, время: 14:17.