Изменение атрибута элемента массива

@Mad1k · Регистрация: 22.05.2016

Студворк — интернет-сервис помощи студентам

Не работает закомментированный кусок кода.
Выбрали категорию, показали данные соответствующей категории. Затем перебираем radio брендов, если в текущем бренде нет нужной категории, то radio необходимо отключить.
В следующей функции мы уже сортируем полученный данные по брендам, где бренды которые ничего не отображают уже должны быть выключены. Файл прилагаю.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready(function() {
            var n=0;
            var category = $("[name='category[]']");
            var k=0;
            var brands = $("[name='brands[]']");
            var s=0;
 
            $("[name='category[]']").on( "click", function() {
                $('.data-item').css('display','none');
                for (var i=0; i < $("[name='category[]']").length; i++) {
                    if (category[i].checked)  {
                        n = i+1;
                        $('.category-'+n).css('display','block');
                        for (var m=0; m < $("[name='brands[]']").length; m++) {
                            s=m+1;
                        //  if ($('.brand-'+s).hasClass('.category-'+n)) {
                        //      brands[s].disabled = true;
                        //  }
                        }
                    }
                }
            });
            $("[name='brands[]']").on( "click", function() {
                $('.data-item').css('display','none');
                for (var j=0; j < $("[name='brands[]']").length; j++) {
                    if (brands[j].checked)  {
                        k=j+1;
                        $('.brand-'+k).find('.category-'+n).css('display','block');
                    }
                }
            });
    });

@diadiavova · 05.04.2018, 01:19

Mad1k, насколько я понял из объяснения, тебе надо при клике на категории делать неактивными бренды, которых в этой категории нет. При этом информацию о том, какие бренды в какой категории присутствуют, надо брать из набора данных. Я добавил в твоей разметке дополнительный атрибут data-value всем чекбоксам, для того, чтобы было за какой бренд или категорию данный чекбокс отвечает. В твоем коде тоже не сильно копался, просто добавил функцию, которая выполняет работу, а в коде нашел место, откуда ее можно вызвать. В результате получилось следующее.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="en">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
     crossorigin="anonymous">
 
    <title>Filter</title>
</head>
 
<body>
    <br>
    <br>
    <div class="container">
        <div class="row">
            <div class="col-2">
                <div class="category-filter">
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-1"> category-1
                    <br>
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-2"> category-2
                    <br>
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-3"> category-3
                    <br>
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-4"> category-4
                    <br>
                </div>
 
                <hr>
 
                <div class="brand-filter">
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-1"> Brand 1
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-2"> Brand 2
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-3"> Brand 3
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-4"> Brand 4
                </div>
            </div>
            <div class="col-10 row data-items-list">
                <div class="brand-2">
                    <div class=" category-1 data-item new-size ">category-1 brand-2</div>
                </div>
                <div class="brand-3">
                    <div class=" category-1 data-item new-size ">category-1 brand-3</div>
                </div>
                <div class="brand-3">
                    <div class=" category-2 data-item new-size ">category-2 brand-3</div>
                </div>
                <div class="brand-4">
                    <div class=" category-2 data-item new-size ">category-2 brand-4</div>
                </div>
                <div class="brand-2">
                    <div class=" category-3 data-item new-size ">category-3 brand-2</div>
                </div>
                <div class="brand-3">
                    <div class=" category-3 data-item new-size ">category-3 brand-3</div>
                </div>
                <div class="brand-1">
                    <div class=" category-4 data-item new-size ">category-4 brand-1</div>
                </div>
                <div class="brand-4">
                    <div class=" category-4 data-item new-size ">category-4 brand-4</div>
                </div>
            </div>
        </div>
    </div>
 
    <style type="text/css">
        .new-size {
            background: green;
            padding: 15px;
            margin: 15px;
        }
    </style>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
     crossorigin="anonymous"></script>
    <script type="text/javascript">
 
        function setBrandCheckboxesDisable(category)
        {
            let brands = $(".data-items-list ." + category).parent("div").toArray().map(e => e.className);
            $(".brand-item").each(function (i, e)
            {
                e.disabled = !brands.includes(e.getAttribute("data-value"));
            });
        }
 
        $(document).ready(function ()
        {
            var n = 0;
            var category = $("[name='category[]']");
            var k = 0;
            var brands = $("[name='brands[]']");
            var s = 0;
 
            $("[name='category[]']").on("click", function ()
            {
                $('.data-item').css('display', 'none');
                setBrandCheckboxesDisable($(this).attr("data-value"));
                for (var i = 0; i < $("[name='category[]']").length; i++)
                {
                    if (category[i].checked)
                    {
                        n = i + 1;
                        $('.category-' + n).css('display', 'block');
                        for (var m = 0; m < $("[name='brands[]']").length; m++)
                        {
                            s = m + 1;
                            if ($('.brand-' + s).hasClass('.category-' + n))
                            {
                                brands[s].disabled = true;
                            }
                        }
                    }
                }
 
 
            });
            $("[name='brands[]']").on("click", function ()
            {
                $('.data-item').css('display', 'none');
                for (var j = 0; j < $("[name='brands[]']").length; j++)
                {
                    if (brands[j].checked)
                    {
                        k = j + 1;
                        $('.brand-' + k).find('.category-' + n).css('display', 'block');
                    }
                }
            });
 
        });
    </script>
</body>
 
</html>

@Mad1k · 05.04.2018, 02:04 **[ТС]**

diadiavova, пожалуйста, прокомментируйте Ваш код новичку.

Добавлено через 1 минуту
diadiavova, желательно очень подробно.

@diadiavova · 05.04.2018, 10:45

Mad1k, функция setBrandCheckboxesDisable устанавливает значение свойства disabled для всех инпутов с классом brand-tem, в соответствии с категорией, которую эта функция принимает как аргумент.

$(".data-items-list ." + category) - здесь из катекории формируется селектор, позволяющий отобрать из блока data-item-list элементы, у которых есть класс с именем, совпадающим с тем, что было передано в функцию. Ну например: если имя категории было category-1, то селектор будет .data-item-list .category-1. И собственно получаем жквери объект, содержащий все элементы данных с таким классом.

.parent("div"). Поскольку мы ищем имена брендов. соответствующие выбранной категории, а в структура элемента данных тут выглядит так

HTML5
1
2
3
                <div class="brand-2">
                    <div class=" category-1 data-item new-size ">category-1 brand-2</div>
                </div>

То есть имя бренда мы можем получить перейдя к родительскому элементу от найденного на предыдущем шаге, то мы и вызываем функцию parent, чтобы получить набор родительских элементов.

.toArray() - здесь объект жквери превращаем в массив дивов, найденных на предыдущем шаге.

.map(e => e.className) - здесь массив дивов превращается в массив имен классов этих самых дивов. Таким образом переменная brands будет содержать массив строк, каждая из которых представляет имя одного из брендов, соответствующих выбранной категории.

$(".brand-item").each(function (i, e) - находим все радиокнопки, соответствующие брендам и к каждому применяем функцию.

e.disabled = !brands.includes(e.getAttribute("data-value")); - здесь радиокнопке соответсвует аргумент e и его свойству disabled присваивается значение. Значение формируется следующим образом: у элемента извлекается атрибут data-value, который указывает за какой бренда данная радиокнопка отвечает и выполняется проверка на предмет присутствия этого значения в массива brands (функция includes) и значение, возвращаемое includes меняется на противополжное оператором !.

Думаю, объяснил предельно подробно.

@Mad1k · 05.04.2018, 11:44 **[ТС]**

diadiavova, понятно, а не могли бы помочь реализовать это в обе стороны, т.е. выбрали категорию, заблокировались лишние бренды и наоборот, выбрали бренд - заблокировались лишние категории

@AlexZaw · 05.04.2018, 13:46

Код конечно еще допиливать и допиливать, но с задачей справляется:
Живой пример

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  <div class="labels">
<label>category-1<input type="checkbox" class="category check" data-category ='category-1' data-brand='brand-2 brand-3'></label>
<label>category-2<input type="checkbox" class="category check" data-category ='category-2' data-brand='brand-3 brand-4'></label>
<label>category-3<input type="checkbox" class="category check" data-category ='category-3' data-brand='brand-2 brand-4'></label>
<label>category-4<input type="checkbox" class="category check" data-category ='category-4' data-brand='brand-1 brand-4'></label>
<hr>
<label>brand-1<input type="checkbox" class="brand check" data-category ='category-4' data-brand='brand-1'></label>
<label>brand-2<input type="checkbox" class="brand check" data-category ='category-1 category-3' data-brand='brand-2'></label>
<label>brand-3<input type="checkbox" class="brand check" data-category ='category-1 category-2' data-brand='brand-3'></label>
<label>brand-4<input type="checkbox" class="brand check" data-category ='category-2 category-3 category-4' data-brand='brand-4'></label>
</div>
<div class="items">
  <div class="item category-1 brand-2 hide">
    <p>category-1 brand-2</p>
  </div>
  <div class="item category-1 brand-3 hide">
    <p>category-1 brand-3</p>
  </div>
  <div class="item category-2 brand-3 hide">
    <p>category-2 brand-3</p>
  </div>
  <div class="item category-2 brand-4 hide">
    <p>category-2 brand-4</p>
  </div>
  <div class="item category-3 brand-2 hide">
    <p>category-3 brand-2</p>
  </div>
  <div class="item category-3 brand-4 hide">
    <p>category-3 brand-4</p>
  </div>
  <div class="item category-4 brand-1 hide">
    <p>category-4 brand-1</p>
  </div>
  <div class="item category-4 brand-4 hide">
    <p>category-4 brand-4</p>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.items{
    width: 800px;
    display: inline-block;
}
 
.item{
    width: 200px;
    display: inline-block;
    margin: 20px;
    text-align: center;
}
.category-1{
    background: #00f;
}
.category-2{
    background: #ccc;
}
.category-3{
    background: #0f0;
}
.category-4{
    background: #f00;
}
label{
    display: block;
}
.labels{
    display: inline-block;
    width: 200px;
}
.hide{
    display: none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
var arrCat = [];
var arrBrand = [];
var inputs = document.getElementsByClassName('check');
for (var i = 0; i < inputs.length; i++) { inputs[i].addEventListener('change', checkInputs) }
 
function blockInputs(arr){
    for (var i =0; i < arr.length; i++){
        arr[i].disabled = true;
    }
}
 
function checkInputs(e) {
    if (e.target.classList.contains('category')) {
        categoryCheck(e);
    } else if (e.target.classList.contains('brand')) {
        brandCheck(e);
    }
}
 
function categoryCheck(e) {
        var arr = [], brand;
        var brands = document.querySelectorAll('.brand');
        for (var i = 0; i < brands.length; i++) {
            arr.push(brands[i])
            brands[i].disabled = false;
        }
         brand = e.target.dataset.brand.split(' ');
    if (e.target.checked) {
        var category = document.querySelectorAll('.' +
            e.target.dataset.category);
        for (var i = 0; i < category.length; i++) {
            arrCat.push(category[i])
        }
            for (var j = 0; j < arr.length; j++){
            for (var k = 0; k < brand.length; k++){
                if(brand[k] == arr[j].dataset.brand){
                    arr.splice(j,1);                
                }
            }
        }
        blockInputs(arr);
    } else {
        arrCat = [];
    }
    showItems();
}
 
function brandCheck(e) {
       var arr = [], category;
        var categories = document.querySelectorAll('.category');
        for (var i = 0; i < categories.length; i++) {
            arr.push(categories[i])
            categories[i].disabled = false;
        }
         category = e.target.dataset.category.split(' ');
    if (e.target.checked) {
        var brand = document.querySelectorAll('.' +
            e.target.dataset.brand);
        for (var i = 0; i < brand.length; i++) {
            arrBrand.push(brand[i])
        }
                    for (var j = 0; j < arr.length; j++){
            for (var k = 0; k < category.length; k++){
                if(category[k] == arr[j].dataset.category){
                    arr.splice(j,1)
                }
            }
        }
        blockInputs(arr);
    } else {
        arrBrand = [];
    }
    showItems();
}
 
function showItems() {
    var arrFull = [], choosen = [];
    var items = document.querySelectorAll('.item');
    arrFull = arrCat.concat(arrBrand);
    for (var i = 0; i < items.length; i++) {
        items[i].classList.add('hide')
    }
    if (arrCat.length > 0 && arrBrand.length > 0) {
        for (var j = 0; j < arrFull.length; j++) {
            if (~arrFull.indexOf(arrFull[j], j + 1)) {
                choosen.push(arrFull[j])
            }
        }
        for (var k = 0; k < choosen.length; k++) {
            choosen[k].classList.toggle('hide');
        }
    } else {
        for (var l = 0; l < arrFull.length; l++) {
            arrFull[l].classList.toggle('hide');
        }
    }
}

@diadiavova · 05.04.2018, 14:47

Сообщение от Mad1k

реализовать это в обе стороны, т.е. выбрали категорию, заблокировались лишние бренды и наоборот, выбрали бренд - заблокировались лишние категории

Не знаю, возможно я не до конца понимаю все нюансы задумки, но так как я это понял - это дурацкая идея. Подобную блокировку имеет смысл делать, если бренды являются подчиненным множеством по отношению к категориям.

Что мы имеем сейчас:
Пользователь выбрал категорию - набор брендов отсортировался. Для чего это нужно? Ну по всей видимости для того, чтобы можно было просматривать товары по брендам в этой категории. И действительно, когда выбирается бренд, товары дополнительно фильтруются.

Что мы получим, если реализовать твою странную задумку:
Пользователь выбрал категорию - набор брендов отсортировался. Пока все хорошо. Дальше он выбирает бренд - дизейблятся категории. Вопрос в том, что при этом происходит с товаром? Если все как раньше, то есть недоступные бренды все еще недоступны и при этом недоступными стали некоторые категории, то не получится ли так, что до некоторых брендов после этой незатейливой операции вообще достучаться будет возможно только после перезагрузки страницы? Ну вот допустим после выбора категории brand-3 стал недоступен. Доступ теперь к нему возможен только если выбрать дну из категорий, в которой есть этот бренд, что уже само по себе не очень удобно, особенно если категорий будет много. Но после выбора скажем brand-1, когда некоторые категории тоже станут недоступны, может возникнуть ситуация, что доступных категорий с этим брендом вообще не останется. И как ты собираешься это решать?
Если же после выбора одного из брендов все остальные станут доступные, то как отсортировать товар и по категории и по бренду?

@diadiavova · 05.04.2018, 14:58

Сообщение от AlexZaw

но с задачей справляется

Спорный вопрос. Там когда клацаешь туда-сюда, иногда получаются странные вещи, например как на картинке: категории выделены все, а из брендов два неактивны, при этом второй выделен. Что касается отображаемых товаров, то там все бренды представлены. Ну и в коде, если я правильно понял, то привязка брендов к категориям не вычисляется из текущего списка товаров, а вшивается в сами чекбоксы и, опять-таки, насколько я понимаю, это не совсем то что надо.

@Mad1k · 05.04.2018, 15:29 **[ТС]**

diadiavova, изначальная суть - сделать фильтр который бы блокировал свой Item который не вернёт никакого результата изначально. Бывает что приложение долго обрабатывает ajax запрос, ты такой выбрал, а там в итоге пусто - поэтому нужно предотвратить такой выбор

@diadiavova · 05.04.2018, 22:00

Mad1k, судя по всему, мои увещевания не возымели действия. В принципе реализовать ту же логику и в обратную сторону - не проблема, код почти такой же, правда пришлось добавить датаитемы дополнительный атрибут data-category, поскольку по классу там не определишь, какой именно является именем категории. Но вряд ли это работает так как ты хотел изначально. Все-таки вернись к моему описанию возможных проблем и хорошенечко продумай как все это должно себя вести. А пока держи то что есть.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
 
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
     crossorigin="anonymous">
 
    <title>Filter</title>
</head>
 
<body>
    <br>
    <br>
    <div class="container">
        <div class="row">
            <div class="col-2">
                <div class="category-filter">
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-1"> category-1
                    <br>
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-2"> category-2
                    <br>
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-3"> category-3
                    <br>
                    <input type="radio" name="category[]" aria-label="" class="category-item" data-value="category-4"> category-4
                    <br>
                </div>
 
                <hr>
 
                <div class="brand-filter">
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-1"> Brand 1
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-2"> Brand 2
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-3"> Brand 3
                    <input type="radio" name="brands[]" aria-label="" class="brand-item" data-value="brand-4"> Brand 4
                </div>
            </div>
            <div class="col-10 row data-items-list">
                <div class="brand-2">
                    <div class=" category-1 data-item new-size " data-category="category-1">category-1 brand-2</div>
                </div>
                <div class="brand-3">
                    <div class=" category-1 data-item new-size " data-category="category-1">category-1 brand-3</div>
                </div>
                <div class="brand-3">
                    <div class=" category-2 data-item new-size " data-category="category-2">category-2 brand-3</div>
                </div>
                <div class="brand-4">
                    <div class=" category-2 data-item new-size " data-category="category-2">category-2 brand-4</div>
                </div>
                <div class="brand-2">
                    <div class=" category-3 data-item new-size " data-category="category-3">category-3 brand-2</div>
                </div>
                <div class="brand-3">
                    <div class=" category-3 data-item new-size " data-category="category-3">category-3 brand-3</div>
                </div>
                <div class="brand-1">
                    <div class=" category-4 data-item new-size " data-category="category-4">category-4 brand-1</div>
                </div>
                <div class="brand-4">
                    <div class=" category-4 data-item new-size " data-category="category-4">category-4 brand-4</div>
                </div>
            </div>
        </div>
    </div>
 
    <style type="text/css">
        .new-size {
            background: green;
            padding: 15px;
            margin: 15px;
        }
    </style>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
     crossorigin="anonymous"></script>
    <script type="text/javascript">
 
        function setBrandCheckboxesDisable(category)
        {
            let brands = $(".data-items-list ." + category).parent("div").toArray().map(e =>e.className);
            $(".brand-item").each(function (i, e)
            {
                e.disabled = !brands.includes(e.getAttribute("data-value"));
            });
        }
        function setCategoryCheckboxesDisable(brand)
        {
            let categories = $(".data-items-list ." + brand + ">div").toArray().map(e =>  e.getAttribute("data-category"));
            $(".category-item").each(function (i, e)
            {
                e.disabled = !categories.includes(e.getAttribute("data-value"));
            });
        }
 
        $(document).ready(function ()
        {
            var n = 0;
            var category = $("[name='category[]']");
            var k = 0;
            var brands = $("[name='brands[]']");
            var s = 0;
 
            $("[name='category[]']").on("click", function ()
            {
                $('.data-item').css('display', 'none');
                setBrandCheckboxesDisable($(this).attr("data-value"));
                for (var i = 0; i < $("[name='category[]']").length; i++)
                {
                    if (category[i].checked)
                    {
                        n = i + 1;
                        $('.category-' + n).css('display', 'block');
                        for (var m = 0; m < $("[name='brands[]']").length; m++)
                        {
                            s = m + 1;
                            if ($('.brand-' + s).hasClass('.category-' + n))
                            {
                                brands[s].disabled = true;
                            }
                        }
                    }
                }
 
 
            });
            $("[name='brands[]']").on("click", function ()
            {
                $('.data-item').css('display', 'none');
                setCategoryCheckboxesDisable($(this).attr("data-value"));
                for (var j = 0; j < $("[name='brands[]']").length; j++)
                {
                    if (brands[j].checked)
                    {
                        k = j + 1;
                        $('.brand-' + k).find('.category-' + n).css('display', 'block');
                    }
                }
            });
 
        });
    </script>
</body>
 
</html>

@Mad1k · 06.04.2018, 17:14 **[ТС]**

diadiavova, Изначально при выборе первом бренда, ничего не отображается

@diadiavova · 06.04.2018, 18:59

Сообщение от Mad1k

Изначально при выборе первом бренда, ничего не отображается

Я не трогал логику отображения элементов. Я делал только дизэйбл и о возможных проблемах я тоже предупредил.

@Mad1k · 08.04.2018, 00:49 **[ТС]**

diadiavova, Разобрался, спасибо большое

@Mad1k · 19.04.2018, 23:22 **[ТС]**

diadiavova, всё таки фильтр будет на клиенте наш, пробовал прикрутить Вашу функцию, но видимо в нашей структуре не так всё. Не могли бы Вы помочь.
Структура данных которые фильтруются:

HTML5
1
2
3
4
5
6
<div data-type="goods[]" class="data-item UA pills " > ... </div>
<div data-type="goods[]" class="data-item BY pills " > ... </div>
<div data-type="goods[]" class="data-item UA suppositories " > ... </div>
 
<!-- Item фильтра -->
<a class="tag" data-type="country[]" data-key="FR" href="#">Франция</a>

Пример фильтрации:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var forms = $("[data-type='forms[]']");  // массив фильтра формы 
var country = $("[data-type='country[]']");  // массив фильтра стран
var data_items = $("[data-type='goods[]']")  // массив фильтрованных данных 
 
$("[data-type='forms[]']").on( "click", function() { // активация фильтра выбора формы выпуска
 
        $(this).addClass("active"); // вешаем класс active на активный item фильтра
        forms_key = $(this).attr("data-key"); // получаем ключ аквтивного item
 
    if (forms_key != "all_forms" && country_key == "all_countries") { //Если выбрана форма и все страны 
          for (var i=0; i < $("[data-type='goods[]']").length; i++) {
            if ($(data_items[i]).hasClass(forms_key)) {
              $(data_items[i]).removeClass("hide");
            } else {
              
            }
          }
        }

@diadiavova · 19.04.2018, 23:48

Mad1k, честно говоря, я не понял, что от меня требуется?

@Mad1k · 19.04.2018, 23:52 **[ТС]**

diadiavova, помните вы описывали функции

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function setBrandCheckboxesDisable(category)
        {
            let brands = $(".data-items-list ." + category).parent("div").toArray().map(e =>e.className);
            $(".brand-item").each(function (i, e)
            {
                e.disabled = !brands.includes(e.getAttribute("data-value"));
            });
        }
        function setCategoryCheckboxesDisable(brand)
        {
            let categories = $(".data-items-list ." + brand + ">div").toArray().map(e =>  e.getAttribute("data-category"));
            $(".category-item").each(function (i, e)
            {
                e.disabled = !categories.includes(e.getAttribute("data-value"));
            });
        }

Не могу их под свою структуру реализовать, та же суть, отключить те которые не вернут ничего.
Подставить класс disable в item фильтра

HTML5
1
<a class="tag" data-type="country[]" data-key="FR" href="#">Франция</a>

@diadiavova · 20.04.2018, 00:11

Mad1k, тогда у меня было более полное представление и о структуре фрагмента документа, с которым надо работать и о критериях фильтрации. А здесь мне непонятно что нужно делать и с чем это нужно делать. Ну например, взять вот этот фрагмент

JavaScript
1
let brands = $(".data-items-list ." + category).parent("div").toArray().map(e =>e.className);

Здесь вычисляются бренды, соответствующие заданной категории, то есть в результате получается массив с брендами.

Что мне было известно:
1. Все элементы, с которых надо собрать данные находятся в контейнере, имеющем класс data-items-list
2. Каждый элемент данных имеет класс с именем категории.
3. У каждого элемента из предыдущего пункта есть ближайший предок div, единственный класс которого совпадает и именем бренда.

Что я тут делаю, имея эти данные:
$(".data-items-list ." + category) - выбираю всех потомков data-item-list с классом, имя которого совпадает с заданной категорией.
.parent("div") - нахожу родительские дивы.
.toArray().map(e =>e.className) - превращаю это дело в массив элементов, из которых извлекаю имена классов, которые соответствуют именам брендов.

Для чего я все это расписываю? Ну чтобы было понятно, что там у меня была вся информация и о структуре данных и о том, по каким критериям что надо искать. Что из этого известно мне сейчас?

@Mad1k · 20.04.2018, 00:37 **[ТС]**

Сообщение от diadiavova

1. Все элементы, с которых надо собрать данные находятся в контейнере, имеющем класс data-items-list

HTML5
1
2
3
4
5
<div class="data-items-list">
      <div data-type="goods[]" class="data-item BY pills" >...</div>
      <div data-type="goods[]" class="data-item FR syrup" >...</div>
      <div data-type="goods[]" class="data-item UA syrup" >...</div>
</div>

У меня получается нет предка, а оба класса фильтров лежат в item, это BY - к примеру бренд, и pills, syrop - категория.

фильтр состоит из ссылок вида

HTML5
1
<a class="tag" data-type="country[]" data-key="FR" href="#">Франция</a>

по нажатию на неё, добавляется класс active - который подсвечивает её, и в data-items-list пропадают те data-item в которых нет класса соответствующего атрибуту ссылки data-key. А в те ссылки которые ничего не вернут, надо подставить класс disable. Необходимо ли выносить какой либо критерий фильтра в предок, например

HTML5
1
2
3
4
5
<div class="data-items-list">
    <div class="BY">
      <div data-type="goods[]" class="data-item  pills" >...</div>
    </div>
</div>

чтобы реализовать данные функции.

@diadiavova · 20.04.2018, 01:26

Сообщение от Mad1k

Необходимо ли выносить какой либо критерий фильтра в предок, например

Нет.

Сообщение от Mad1k

по нажатию на неё, добавляется класс active - который подсвечивает её, и в data-items-list пропадают те data-item в которых нет класса соответствующего атрибуту ссылки data-key.

Я - не знаток жквери, и, честно говоря, скорей сделал бы без нее, но по всей видимости, исходя из описанного, это будет выглядеть как-то так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        $(document).ready(function ()
        {
            $(".tag").click(function ()
            {
                $(".tag").removeClass("active");
                $(this).addClass("active");
                let key = $(this).attr("data-key");
                $(".data-items-list>div").each(function ()
                {
                    if ($(this).hasClass(key)) $(this).removeClass("hide");
                    else $(this).addClass("hide");
                });
            });
        });

Здесь предполагается, что есть в документе класс hide со стилем display:none. Одним словом: надо пробовать.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@Mad1k 0 / 0 / 0 Регистрация: 22.05.2016 Сообщений: 53
	05.04.2018, 02:04 [ТС]
	diadiavova, пожалуйста, прокомментируйте Ваш код новичку. Добавлено через 1 минуту diadiavova, желательно очень подробно. 0

@Mad1k 0 / 0 / 0 Регистрация: 22.05.2016 Сообщений: 53
	05.04.2018, 11:44 [ТС]
	diadiavova, понятно, а не могли бы помочь реализовать это в обе стороны, т.е. выбрали категорию, заблокировались лишние бренды и наоборот, выбрали бренд - заблокировались лишние категории 0

@Mad1k 0 / 0 / 0 Регистрация: 22.05.2016 Сообщений: 53
	05.04.2018, 15:29 [ТС]
	diadiavova, изначальная суть - сделать фильтр который бы блокировал свой Item который не вернёт никакого результата изначально. Бывает что приложение долго обрабатывает ajax запрос, ты такой выбрал, а там в итоге пусто - поэтому нужно предотвратить такой выбор 0

@Mad1k 0 / 0 / 0 Регистрация: 22.05.2016 Сообщений: 53
	06.04.2018, 17:14 [ТС]
	diadiavova, Изначально при выборе первом бренда, ничего не отображается 0

@Mad1k 0 / 0 / 0 Регистрация: 22.05.2016 Сообщений: 53
	08.04.2018, 00:49 [ТС]
	diadiavova, Разобрался, спасибо большое 0

@diadiavova 7258 / 2605 / 744 Регистрация: 11.04.2015 Сообщений: 4,148 Записей в блоге: 43
	19.04.2018, 23:48
	Mad1k, честно говоря, я не понял, что от меня требуется? 0

Изменение атрибута элемента массива

Решение