0

Есть 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();

    }

1 ответ 1

0

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

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

и т.д.

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

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

1
  • Вроде как верно. 1 кнопка 1 фото, 2 копка 2 фото, 3 кнопка 3 фото, 1 и 2 кнопка 4 фото, 1 и 3 конка 5 фото, 2 и 3 кнопка 6 фото. Но я понять не имею как переделать мой код под это)
    – MyBigPony3
    27 ноя 2020 в 17:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.