Как показать все div, содержащие одинаковую комбинацию классов - PullRequest
Новая
       1

Как показать все div, содержащие одинаковую комбинацию классов

0 голосов
/ 08 мая 2019

Я хотел бы показать определенные сообщения на странице Wordpress и скрыть все остальные.Какие сообщения должны быть показаны, должны зависеть от флажков, отмеченных в верхней части страницы.Флажок соответствует классу.Когда (например) установлены два флажка (по сути, выбраны два класса), должны отображаться только сообщения, содержащие по крайней мере эти два класса в своем упаковочном div (кроме возможного третьего или четвертого класса, который они могут иметь) (и все другие сообщенияскрыто) мгновенно на странице.

Кто-нибудь из вас знает, как это осуществить?

Мне уже удалось получить теги, назначенные посту в CMS, и передать эти теги вОборачивая div этого самого поста в качестве имен классов, пока все хорошо.

Как написать последний кусок необходимого кода с нуля, мне очень трудно сделать с этим небольшим объемом знаний, которые у меня есть.Я понимаю, что сначала должны быть собраны нужные классы (выбраны с помощью отмеченных флажков).Затем должно быть сформировано условие (класс1 И класс3 И класс7 были выбраны).Тогда, если это условие истинно для поста («ваш упаковочный div содержит class1, class3 и class7»), только тогда пост должен быть показан.Пост также может (например) содержать class2, это нормально, хотя фильтр состоит из комбинации class1, class3 и class7, присутствующих в div-обертке, если это так, это может быть показано).

Я уверен, что для многих из вас это должна быть прогулка по парку, для меня все еще довольно трудно понять с нуля, поэтому любая помощь, которую вы, ребята, могли бы оказать мне, очень ценится!Заранее спасибо!

Спасибо за ваш ответ, ребята, на данный момент в Интернете я нашел следующее: 

$("#filters :checkbox").click(function() {
   $("div").hide();
   $("#filters :checkbox:checked").each(function() {
       $("." + $(this).val()).show();
   });
});

Это происходит из этой настройки: http://jsfiddle.net/6wYzw/41/> здесь показано сообщение, когда его упаковочный div содержит classX AND / OR classY, см. Его рабочий пример.Я считаю, что часть, в которой говорится, что 

$("." + $(this).val()).show();

... должна быть скорректирована, так что прямо здесь все отмеченные флажки / классы до сих пор учитываются с использованием AND, а не OR.Это единственная строка, которую нужно настроить для того, чтобы моя желаемая настройка работала так, как я этого хочу?

@ Lisrael> сначала должны отображаться все сообщения, затем фильтр начинает срабатыватькак только флажки начинают нажиматься, как вы и сказали.

1 Ответ

0 голосов
/ 16 мая 2019

Узнал, как это сделать! С помощью примера, который уже подошел, и множества «суб» примеров здесь и там. Смотрите код. 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h3 align="center">Boardgamefilter</h3>

<form name="gamesettings">
<input type="checkbox" name="gamesetting" value="1p">1p<br />
<input type="checkbox" name="gamesetting" value="2p">2p<br />
<input type="checkbox" name="gamesetting" value="3p">3p<br />
<input type="checkbox" name="gamesetting" value="4p">4p<br />
<input type="checkbox" name="gamesetting" value="5p">5p<br />
<input type="checkbox" name="gamesetting" value="6plus">6plus<br />
<br />
<input type="checkbox" name="gamesetting" value="15m">15m<br />
<input type="checkbox" name="gamesetting" value="30m">30m<br />
<input type="checkbox" name="gamesetting" value="45m">45m<br />
<input type="checkbox" name="gamesetting" value="60m">60m<br />
<input type="checkbox" name="gamesetting" value="90m">90m<br />
<input type="checkbox" name="gamesetting" value="120mplus">120mplus
<br />
<br />
<input type="button" name="Un_CheckAll" value="Reset"
onClick="UnCheckAll(document.gamesettings.gamesetting)">
</form>

<br />
<br />

<div id="boardgames">
<div class="1p 2p 15m 30m" style="display: block;">1p 2p 15m 30m</div>
<div class="1p 2p 30m 45m" style="display: block;">1p 2p 30m 45m</div>
<div class="2p 30m 60m" style="display: block;">2p 30m 60m</div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

    $('input[name=gamesetting]').change(function(){

        var arr = []
        $(":checkbox").each(function(){
           if($(this).is(":checked")){
             arr.push($(this).val())
           }
        })
        var vals = arr.join(".")
        var str = (".") + vals

        $('#boardgames div').hide();
        $('#boardgames div' + (str)).show();

    })

    function UnCheckAll(chk) {
        for (i = 0; i < chk.length; i++)
        chk[i].checked = false ;
        $('#boardgames div').show();
    }

</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...