Сортировка классов html+javascript

214
19 июля 2022, 14:50

Есть 3 кнопки (чекбоксы) и допустим 6 картинки. Как написать код так, чтобы при нажатии на 1 кнопку вылезала 1 картинка, при нажатии на 2 кнопку вылазила 2 картинка, при нажатии 1 и 2 вылазила 3 картинка, при нажатие 1 и 3 вылазила 4 картинка и тд, а не вылазили при нажатии 3 кнопок одновременно 1, 2 и 3 картинка. Думаю что-то нужно поменять на javascript в строчках:

if (self.groups[0].active.length == 2)
    self.groups[0].active = ['.check4'];
    
if (self.groups[0].active.length == 3)
    self.groups[0].active = ['.check5'];

-гит github.com/DenisG1302/DenisG1302.github.io

-сайт denisg1302.github.io

html

    <!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->
    
    <title>Content Filters | CodyHouse</title>
</head>
<body>
    <header class="cd-header">
        <h1>Content Filters</h1>
    </header>
    <main class="cd-main-content">
        <section class="cd-gallery">
            <ul>
                <li class="mix color-1 check1">11</li>
                <li class="mix color-1 check2">22</li>
                <li class="mix color-1 check3">33</li>
                <li class="mix color-1 check4">44</li>
                <li class="mix color-1 check5">55</li>
                <li class="mix color-1 check6">66</li>
            </ul>
            <div class="cd-fail-message">No results found</div>
        </section> <!-- cd-gallery -->
        <div class="cd-filter">
            <form>
                <div class="cd-filter-block">
                    <h4>Check boxes</h4>
                    <ul class="cd-filter-content cd-filters list">
                    
                        <li>
                            <input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
                            <label class="checkbox-label" for="checkbox1">1</label>
                        </li>
                        <li>
                            <input class="filter" data-filter=".check2" type="checkbox" id="checkbox2">
                            <label class="checkbox-label" for="checkbox2">2</label>
                        </li>
                        
                        <li>
                            <input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
                            <label class="checkbox-label" for="checkbox3">3</label>
                        </li>
                        
                    </ul> <!-- cd-filter-content -->
                </div> <!-- cd-filter-block -->
            </form>
            <a href="#0" class="cd-close">Close</a>
        </div> <!-- cd-filter -->
        <a href="#0" class="cd-filter-trigger">Filters</a>
    </main> <!-- cd-main-content -->введите сюда код
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

javascript

parseFilters: function(){
        var self = this;
     
        // loop through each filter group and grap the active filter from each one.
        for(var i = 0, group; group = self.groups[i]; i++){
            group.active = [];
            group.$inputs.each(function(){
                var $this = $(this);
                if($this.is('input[type="radio"]') || $this.is('input[type="checkbox"]')) {
                    if($this.is(':checked') ) {
                        group.active.push($this.attr('data-filter'));
                    }
                } else if($this.is('select')){
                    group.active.push($this.val());
                } else if( $this.find('.selected').length > 0 ) {
                    group.active.push($this.attr('data-filter'));
                }
            });
        }
        if (self.groups[0].active.length == 2)
            self.groups[0].active = ['.check4'];
    
        if (self.groups[0].active.length == 3)
            self.groups[0].active = ['.check5'];
        
        self.concatenate();
    }
Answer 1

немного на битовое представление похоже:

1 кнопка - 001 (1)
2 кнопка - 010 (2)
1 и 2 кнопка - 011 (3)
3 кнопка - 100 (4)

и т.д.

вам именно такая система нужна?

если да, то получив информацию о всех чекбоксах можно получить нужный индекс

READ ALSO
Отобразить объекты с последнего добавленого
javascript

Отобразить объекты с последнего добавленого

Подскажите пожалуйста как отобразить объекты чтобы последний добавленный был первымСейчас все наоборот

 211
Не подключается js скрипт
javascript

Не подключается js скрипт

Не подключается js скрип к сайту, выдает ошибку net::ERR_ABORTED 404 (Not Found)Пробовал сделать папку статической с помощью

 276
switchButton isChecked(true/false) внутри itemView of recycleView. Room. Как создать условие а адаптере?
Java

switchButton isChecked(true/false) внутри itemView of recycleView. Room. Как создать условие а адаптере?

Подскажите плиз, как сделать чтобы в зависимости от значения level в объекте Word в базе, switchButton внутри соответствующего itemView при загрузке активити...

 365
Инвертирование массива
Java

Инвертирование массива

Помогите выполнить задание, ломаю голову уже 2й час

 340