World!
Мне нужна помощь в уточнении концепции галереи JQuery с двумя фильтрами.
Прямо сейчас моя логика / подход заключается в использовании фильтров в качестве имен и идентификаторов классов. Таким образом, когда кто-то нажимает фильтруемую «кнопку» с идентификатором, он запускает действие, которое необходимо предпринять для всех связанных классов. Теперь я могу отфильтровать каждый, и он работает хорошо. НО, когда я выбираю фильтр из 1 И 2, я хочу, чтобы он исключил все другие карты, даже если они принадлежат одному из двух фильтров. Только если карта принадлежит ОБЕ фильтрам, она должна показываться. Прямо сейчас, даже если он принадлежит только одному фильтру, он показывает.
Что касается выбора нескольких элементов одновременно, я не могу обдумать это. Я запутался, как «уменьшить» этот код. Если у вас есть отличная идея, чтобы помочь уменьшить код, пожалуйста, поделитесь. Я все еще изучаю JQuery.
Я пытаюсь спроектировать и создать веб-страницу с галереей контейнеров div JQuery. Я называю эти контейнеры div "карточками". На каждой карточке хранятся заголовки, объявления и т. Д. Пользователь может просматривать карточки, отфильтровывая карточки по категориям (компетенциям) и дням недели. Это поможет пользователю выбрать лучшую карту для них.
Прямо сейчас я вручную пишу каждый случай для фильтра. Вероятно, это не самый эффективный способ написания этого, но эй, это работает! НО, когда я выбираю фильтр из 1 И 2, я хочу, чтобы он исключил все другие карты, даже если они принадлежат одному из двух фильтров. Только если карта принадлежит ОБЕ фильтрам, она должна показываться. Прямо сейчас, даже если он принадлежит только одному фильтру, он показывает.
Кроме того, я создаю страницу с помощью Bootsrap.
HTML
2 Настройка фильтра
<!-- First Filter, by Category -->
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="buttonAll" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button1" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button2" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button3" src="..."/>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<img id="button4" src="..."/>
</div>
<!-- Second Filter, by Day -->
<p id="dayAll">Any Day</p>
<p id="monday">Monday</p>
<p id="tuesday">Monday</p>
<p id="wednesday">Wednesday</p>
<p id="thursday">Thursday</p>
<p id="friday">Friday</p>
HTML
Настройка карты / галереи
<div class="container">
<div class="row">
<!-- START CLASS CARD -->
<div class="class-card sort-button1 sort-button2 sort-button3 sort-button4 monday">
<h1>Class Title</h1>
<h3>Monday @ 3:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_4.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- START CLASS CARD -->
<div class="class-card sort-button2 monday">
<h1>Class Title</h1>
<h3>Monday @ 12:00 PM</h3>
<p>Develops:
<img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- plus a bunch more cards -->
</div><!-- end row -->
</div><!-- end container -->
JS
Фильтр 1, в действительности
// Filter 1: by Day
// Show cards for all days of week by default
$('.monday').show();
$('.tuesday').show();
$('.wednesday').show();
$('.thursday').show();
$('.friday').show();
// When user clicks "View All" show cards for all days of week
$('#dayAll').click(function() {
$('.monday').fadeIn();
$('.tuesday').fadeIn();
$('.wednesday').fadeIn();
$('.thursday').fadeIn();
$('.friday').fadeIn();
$('.monday').fadeIn();
});
// When user clicks "Monday" show cards for Monday and hide others
$('#monday').click(function() {
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
$('.monday').fadeIn();
});
// When user clicks "Tuesday" show cards for Tuesday and hide others
$('#tuesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeIn();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Wednesday" show cards for Wednesday and hide others
$('#wednesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeIn();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Thursday" show cards for Thursday and hide others
$('#thursday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeIn();
$('.friday').fadeOut();
});
// When user clicks "Friday" show cards for Friday and hide others
$('#friday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeIn();
});
JS
Фильтр 2, в действительности
// Filter 2: by Category (Competency)
// Show cards for all categories by default
$('.sort-button1').show();
$('.sort-button2').show();
$('.sort-button3').show();
$('.sort-button4').show();
// When user clicks "View All" show cards for all categories
$('#buttonAll').click(function() {
$('.sort-button1').fadeIn();
$('.sort-button2').fadeIn();
$('.sort-button3').fadeIn();
$('.sort-button4').fadeIn();
});
// When user clicks "button1" show cards for button1 and hide others
$('#button1').click(function() {
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button1').fadeIn();
});
// When user clicks "button2" show cards for button2 and hide others
$('#button2').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button2').fadeIn();
});
// When user clicks "button3" show cards for button3 and hide others
$('#button3').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button3').fadeIn();
});
// When user clicks "button4" show cards for button4 and hide others
$('#button4').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeIn();
});
См. Полный проект на CodePen .
Я все еще начинающий программист JQuery, поэтому я не могу вместить весь свой код в этой статье. Можете ли вы взглянуть на мой CodePen и просмотреть его?
Вы можете смеяться над тем, что я написал для части JS, потому что я выписывал пошагово, без циклов и переменных. Если это можно улучшить, я тоже открыт. Циклы и переменные просто смущают меня в этот момент. Спасибо !!