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

233

13 июля 2022, 03:00

Есть 2 кнопки (чекбоксы) и 3 картинки. Как написать код так, чтобы при нажатии на 1 кнопку вылезала 1 картинка, при нажатии на 2 кнопку вылазила 2 картинка, а при нажатии 1 и 2 вылазила 3 картинка, а не 1 и 2. -гит github.com/DenisG1302/DenisG1302.github.io -сайт denisg1302.github.io

    <main class="cd-main-content">
    <section class="cd-gallery">
        <ul>
            <li class="mix color-1 check1"><img src="img/img-1.jpg" alt="Image 1"></li>
            <li class="mix color-1 check2"><img src="img/img-2.jpg" alt="Image 2"></li>
            <li class="mix color-1 check3"><img src="img/img-3.jpg" alt="Image 3"></li>
            <li class="gap"></li>
            <li class="gap"></li>
            <li class="gap"></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">Option 1</label>
                    </li>
                    <li>
                        <input class="filter" data-filter=".check2" type="checkbox" id="checkbox2">
                        <label class="checkbox-label" for="checkbox2">Option 2</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 -->

Answer 1

Думаю необходимо что-то следующее. На 188 и 189 строки main.js добавить следующий код:

if (self.groups[0].active.length == 2)
    self.groups[0].active = ['.check3'];

чтобы получилось следующее:

    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'));
                }
            });
        }
        var actives = self.groups[0].active;
        if (actives.includes('.check1') && actives.includes('.check2'))
            self.groups[0].active = ['.check3'];
        self.concatenate();
    },