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

@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. Одним словом: надо пробовать.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@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 7259 / 2606 / 744 Регистрация: 11.04.2015 Сообщений: 4,150 Записей в блоге: 43
	19.04.2018, 23:48
	Mad1k, честно говоря, я не понял, что от меня требуется? 0

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

Решение