Скрыть и показать несколько элементов класса с помощью кнопок в меню - PullRequest
Новая
       1

Скрыть и показать несколько элементов класса с помощью кнопок в меню

0 голосов
/ 25 января 2020

Я знаю, что это задавали несколько раз, но ни один из вопросов не соответствует моему случаю.

Это мой веб-сайт временной шкалы: http://witch-house.com/thetimeline/

Он использует эту структуру: 

<ul>
<li class="blog"></li>
<li class="blog"></li>
<li class="artist"></li>
<li class="mix"></li>
<li class="blog"></li>
<li class="artist"></li>
.
.
.
</ul>

сейчас я хочу, чтобы на моем веб-сайте было 4 нажимаемых кнопки: «ПОКАЗАТЬ ВСЕ», «ХУДОЖНИКИ», «БЛОГИ», «СМЕШИВАНИЯ»

по умолчанию включена опция ПОКАЗАТЬ ВСЕ, и при нажатии на ХУДОЖНИКИ будут отображаться все <li> элементы

, на веб-сайте будут отображаться только все элементы <li>, помеченные class="artist" +, сменить кнопку ХУДОЖНИКИ цвет на красный

при нажатии на БЛОГИ поверх этого появятся все <li> элементы, отмеченные class="blog" (рядом с ранее выбранными ХУДОЖНИКАМИ) + кнопка также изменит цвет на красный

et c

при повторном нажатии кнопки ПОКАЗАТЬ ВСЕ все элементы должны быть видны, а все остальные кнопки должны go вернуться к стандартному цвету.

Я нашел это " простое "решение: https://isabelcastillo.com/toggle-showhide-multiple-elements-with-pure-javascript

, но оно предназначено только для одного элемента не все элементы класса:

HTML

<h2 class="clickable-heading">Toggle This Dropdown</h2>
<ul>
    <li><a href="#">How To Do This</a></li>
    <li><a href="#">Installing in The Mid 90s</a></li>
</ul>
<h2 class="clickable-heading">Click This Dropdown 2</h2>
<ul>
    <li><a href="#">Vote For Pedro</a></li>
    <li><a href="#">Your Name is Napoleon?</a></li>
</ul>

JS

function toggleDocs(event) {
    if (event.target && event.target.className == 'clickable-heading') {
        var next = event.target.nextElementSibling;
        if (next.style.display == "none") {
            next.style.display = "block";
        } else {
            next.style.display = "none";
        }
    }
}
document.addEventListener('click', toggleDocs, true);

is есть способ настроить это?

или, может быть, другое предложение, как справиться с этим?

спасибо!

1 Ответ

1 голос
/ 25 января 2020

Вы можете сделать это так

Использование Pure Javascript

        document.querySelector('#showAll').onclick = function () {
            document.querySelector('#showAll').innerHTML = 'Show All';
            document.querySelector('#toggleBlog').innerHTML = 'Hide Blogs';
            document.querySelector('#toggleMixes').innerHTML = 'Hide Mixes';
            document.querySelector('#toggleArtists').innerHTML = 'Hide Artists';
            document.querySelectorAll('li').forEach(function (item, i) {
                item.style.display = '';
            });
        };

        document.querySelector('#toggleBlog').onclick = function () {
            document.querySelectorAll('li.blog').forEach(function (item, i) {
                item.style.display = item.style.display == '' ? 'none' : '';
            });

            document.querySelector('#toggleBlog').innerHTML = document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' ? 'Show Blogs' : 'Hide Blogs';
            if (document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' && document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' && document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes')
                document.querySelector('#showAll').innerHTML = 'Show All';
            else
                document.querySelector('#showAll').innerHTML = 'Not All';
        };

        document.querySelector('#toggleArtists').onclick = function () {
            document.querySelectorAll('li.artist').forEach(function (item, i) {
                item.style.display = item.style.display == '' ? 'none' : '';
            });

            document.querySelector('#toggleArtists').innerHTML = document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' ? 'Show Artists' : 'Hide Artists';
            if (document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' && document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' && document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes')
                document.querySelector('#showAll').innerHTML = 'Show All';
            else
                document.querySelector('#showAll').innerHTML = 'Not All';
        };

        document.querySelector('#toggleMixes').onclick = function () {
            document.querySelectorAll('li.mix').forEach(function (item, i) {
                item.style.display = item.style.display == '' ? 'none' : '';
            });

            document.querySelector('#toggleMixes').innerHTML = document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes' ? 'Show Mixes' : 'Hide Mixes';
            if (document.querySelector('#toggleBlog').innerHTML == 'Hide Blogs' && document.querySelector('#toggleArtists').innerHTML == 'Hide Artists' && document.querySelector('#toggleMixes').innerHTML == 'Hide Mixes')
                document.querySelector('#showAll').innerHTML = 'Show All';
            else
                document.querySelector('#showAll').innerHTML = 'Not All';
        };
<button id="showAll">Show All</button>
    <button id="toggleBlog">Hide Blogs</button>
    <button id="toggleArtists">Hide Artists</button>
    <button id="toggleMixes">Hide Mixes</button>

    <ul>
        <li class="blog">Blog 1</li>
        <li class="blog">Blog 2</li>
        <li class="artist">Artist 1</li>
        <li class="mix">MIX 1</li>
        <li class="blog">BLOG 3</li>
        <li class="artist">Artist 2</li>
    </ul>

Использование jQuery

        $('#showAll').click(function () {
            $('#toggleBlog').html('Hide Blogs');
            $('#toggleMixes').html('Hide Mixes');
            $('#toggleArtists').html('Hide Artists');
            $('li').each(function () {
                $(this).show();
            });
        });

        $('#toggleBlog').click(function () {
            $('li.blog').each(function () {
                $(this).toggle();
            });
            $('#toggleBlog').html($('#toggleBlog').data('state') == 'shown' ? 'Hide Blogs' : 'Show Blogs');
        });

        $('#toggleArtists').click(function () {
            $('li.artist').each(function () {
                $(this).toggle();
            });
            $('#toggleArtists').html($('#toggleArtists').data('state') == 'shown' ? 'Hide Artists' : 'Show Artists');
        });

        $('#toggleMixes').click(function () {
            $('li.mix').each(function () {
                $(this).toggle();
            });
            $('#toggleMixes').html($('#toggleMixes').data('state') == 'shown' ? 'Hide Mixes' : 'Show Mixes');
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button id="showAll">Show All</button>
    <button id="toggleBlog">Hide Blogs</button>
    <button id="toggleArtists">Hide Artists</button>
    <button id="toggleMixes">Hide Mixes</button>

    <ul>
        <li class="blog">Blog 1</li>
        <li class="blog">Blog 2</li>
        <li class="artist">Artist 1</li>
        <li class="mix">MIX 1</li>
        <li class="blog">BLOG 3</li>
        <li class="artist">Artist 2</li>
    </ul>

Здесь мы обрабатываем состояние скрытия / показа элементов на основе html внутренней кнопки

И, как только show all кнопка нажата, все элементы показаны

...