JQuery - Показать и спрятать div с различными в зависимости от класса

Question

Привет всем, Я пытаюсь создать страницу портфолио для моего нового веб-сайта, которая будет отображать элементы портфолио в сетке. Функциональность кажется простой, но я не могу придавить jQuery. Вот как мне это нужно для работы.

1. По умолчанию я хочу, чтобы все элементы отображались.
2. При нажатии кнопки определенной категории я хочу, чтобы она отображала соответствующие элементы div и скрывала остальные.
3. Эти div имеют перекрывающиеся классы (некоторые элементы вписываются в несколько категорий). Эти элементы должны отображаться при нажатии любой из кнопок соответствующих классов.

Вот то, что я пытался использовать, чтобы заставить его работать (кажется громоздким, но я нуб jQuery):

---

        $(document).ready(function(){
        $('#showall').click(function(){ 
            $(".item").show("fast");
        })

        $('#webtrigger').click(function(){
             if ($('.web').is(':visible')) {
                 $('.web').show('fast');
                    } else {
                 $('.illustration.print.logo').hide('fast');
             }
         return false;
            })

        $('#logotrigger').click(function(){
             if ($(".logo").is(":visible")) {
                 $(".logo").show("fast");
                    } else {
                 $(".illustration.print.web").hide("fast");
             }
         return false;
            })
     });

    <a href="#" id="showall">show all</a><br/>
    <a href="#" id="webtrigger">web</a><br/>
    <a href="#" id="illustrationtrigger">illustration</a><br/>
    <a href="#" id="printtrigger">print</a><br/>
    <a href="#" id="logotrigger">logo</a><br />

    <div id="wrapper">
        <div class="item web">web</div>
        <div class="item illustration">illustration</div>
        <div class="item print">print</div>
        <div class="item logo">logo</div>
        <div class="item web logo">web logo</div>
        <div class="item print illustration ">illustration print</div>
        <div class="item illustration logo">illustration logo</div>
    </div>

---

Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Я бы удалил 'триггер' из различных элементов управления id s и добавил бы 'control' class, чтобы получить:

<a href="#" id="showall">show all</a><br/>
<a href="#" id="web" class="control">web</a><br/>
<a href="#" id="illustration" class="control">illustration</a><br/>
<a href="#" id="print" class="control">print</a><br/>
<a href="#" id="logo" class="control">logo</a><br />

Затем использовал бы jQuery:

$('a.control').click(
function(){
   var show = this.id;
    $('#wrapper > div.' + show).show();
    $('#wrapper > div:not(".'+show+'")').hide();
    return false;
});

JS Fiddle demo .

Answer 2

Я бы сделал трюк и использовал бы идентификатор ссылки, чтобы вызвать класс содержимого:

 <a href="#" class="showall">show all</a><br/>
    <a href="#" class="trigger" id="web">web</a><br/>
    <a href="#" class="trigger" id="illustration">illustration</a><br/>
    <a href="#" class="trigger" id="print">print</a><br/>
    <a href="#" class="trigger" id="logo">logo</a><br />

    <div id="wrapper">
        <div class="item web">web</div>
        <div class="item illustration">illustration</div>
        <div class="item print">print</div>
        <div class="item logo">logo</div>
        <div class="item web logo">web logo</div>
        <div class="item print illustration ">illustration print</div>
        <div class="item illustration logo">illustration logo</div>
    </div>

Чтобы показать их все по умолчанию, используйте css

.item { display:block; }

Затем jquery для отображения их:

 $(document).ready(function(){
   $(".showall").click(function(){$(".item").fadeIn(300);});
   $(".trigger").click(function(){
     var contentToDisplay = $("."+this.id);
     if (contentToDisplay.is(":visible")) return;
     $(".item").fadeOut(300); // I prefer this to hide effect
     contentToDisplay.fadeIn(500);
   });
 });

Answer 3

jQuery:

$(document).ready(function(){</p> <pre><code>$('#showall').click(function() { $(".item").show("fast"); return false; }) $('.trigger').click(function() { var triggerType = $(this).attr("id"); $(".item").hide("fast"); $('.'+triggerType).show('fast'); return false; });

});

HTML:

<a href="#" id="showall">show all<br/> <a href="#" id="web" class="trigger">web<br/> <a href="#" id="illustration" class="trigger">illustration<br/> <a href="#" id="print" class="trigger">print<br/> <a href="#" id="logo" class="trigger">logo<br /></p> <p><div id="wrapper"> <div class="item web">web</div> <div class="item illustration">illustration</div> <div class="item print">print</div> <div class="item logo">logo</div> <div class="item web logo">web logo</div> <div class="item print illustration ">illustration print</div> <div class="item illustration logo">illustration logo</div> </div></p> <p>

Answer 4

Что-то вроде этого должно работать, когда нужно выбирать предметы:

funciton tagClicked(e)
{
     var ClassName=$(this).text();
if(ClassName="show all")
{

}
else
{

$.each($('.item'), function(idx,value)
        { 
        if(value.hasClass(ClassName))
        {value.show();}
        else{ value.hide();}
        };
}
}

Answer 5

Я бы сделал что-то вроде этого:

$('#webtrigger').click(function(){
         $(".item").hide();
         $('.web').show('fast');
        });

Вы мгновенно скрываете все предметы, а затем показываете с анимацией интересующие вас дивы. Конечно, это одинаково для всех триггеров, которые у вас есть.

Answer 6

Сделайте это.

$('#webtrigger').click(function(){
     var shown = $('.web').show('fast').get();
     $('#wrapper > item').not(shown).hide('fast');
     return false;
});

Он хранит те, которые вы показываете в переменной, затем использует not() ^{(документы)} чтобы исключить их из скрытых.