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

Question

Вот моя проблема.У меня есть эти кнопки фильтрации на моем веб-сайте, и у каждой из них есть имя, например «UI, DEVELOPMENT, DATABASE и т. Д.»

<ul class="tags_list">
    <li><a href="#" id="tag_ui">Ui</a></li>
    <li><a href="#" id="tag_database">Database</a></li>
    ...etc
</ul>

Затем на странице есть группа элементов с REL, равным одному из этих идентификаторов.

<ul class="story_list">
    <li rel="tag_ui"> *SOME CONTENT* </li>
    <li rel="tag_database"> *SOME CONTENT* </li>
    ...etc
</ul>

У меня также есть некоторый jquery, который делает егопоэтому, когда вы нажимаете одну из кнопок фильтра "tags_list", он переключает любой элемент "story_list" для скрытия или отображения в зависимости от того, выбрана кнопка "tags_list" или нет.

$(".tags_list li a").on('click',function() {
    var relid = this.id;
    $(".story_list li[rel!='" + relid + "']").toggle('fast');
    return false;
});

Сейчасэтот код работает нормально, когда вы просто нажимаете кнопку «TAG_UI», а затем снова нажимаете, чтобы деактивировать ее.Но когда у вас активирован TAG_UI, вы также нажимаете TAG_DATABASE, что происходит, когда появляется элемент "story_li", НО эти два будут отображаться, и эти два будут скрыты.

Что мне действительно нужно, это:

• При первом нажатии кнопки фильтра будут отображаться только связанные элементы, а все остальное будет скрыто.
• Когда вы нажимаете на другую кнопку фильтра, не деактивируя первый, отображаются только эти два связанных элемента, но все остальное все еще скрывается.

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

Я знаю, что это многословно, так что, надеюсь, все это имеет смысл.Дайте мне знать, если вам нужно что-то разъяснить.

Заранее спасибо!

Answer 1

Добавление некоторых классов во время выбора и отмены выбора очень поможет вам и позволит стилизовать вещи.

Примерно так должно работать:

var list = $(".story_list li");
$(".tags_list li a").on('click',function( event ) {
    event.preventDefault();

    var relid = this.id,
        that = $( this );
    if ( that.is(".selected") ) {
        that.removeClass( "selected" );
        list.filter("[rel='" + relid + "']").removeClass("selected").hide("fast");
    } else {
        list.filter(":not(.selected)[rel!='" + relid + "']")
            .removeClass("selected").hide("fast");
        list.filter("[rel='" + relid + "']")
            .addClass("selected").show("fast");
        that.addClass( "selected" );
    }
    // If nothing selected show everything
    if ( !list.filter(".selected").length ){
        list.show("fast");
    }
});

Пример: http://jsfiddle.net/petersendidit/TPjyG/

Answer 2

Инициализируйте глобальную переменную, которая отслеживает, была ли нажата кнопка или нет, например:

var buttonClicked = false;

Затем в вашем обратном вызове click спрячьте каждый элемент <li> в элементе с классом story_list и проследите, чтобы кнопка была нажата, например, так:

$(".tags_list li a").on('click',function() {
    var relid = this.id;
    if(!buttonClicked) {
        $(".story_list li").hide();
        buttonClicked = true;
    }
    $(".story_list li[rel='" + relid + "']").toggle('fast');
    return false;
});

Answer 3

Так что в основном все сводится к связанному элементу с атрибутом rel, соответствующим фильтру, по которому щелкают переключатели между hide и show.

Это должно соответствовать критериям элементов, отображаемых при первом щелчке, а если щелкнуть по второму типу, будут показаны только эти два типа.

Повторный щелчок по фильтру скрывает связанный элемент;

$('.tags_list a').on('click', function() {
   $(".story_list li[rel='" + this.id + "']".toggle();
}

См. http://jsfiddle.net/Ubxuf/, чтобы проверить, хотите ли вы этого?

Answer 4

Проблема заключается в том, что вы пытаетесь обрабатывать более одного типа переходов состояний с одной и той же логикой. Вы можете действовать по-разному в зависимости от выбранных набор кнопок:

• Если все не выбраны, фильтр деактивируется и отображаются все элементы
• Если выбран один или несколько, фильтр активируется, и отображаются только эти элементы

Один из способов решить эту проблему - проверить оба состояния и выполнить соответствующий переход для каждого:

on click:
  figure out the new state for the currently clicked button

  if enabling this button:
    check the previous state for all buttons

    if all buttons were unselected:
      hide all but the currently selected choice
      exit function

    show the filtered items
    exit function

  else (disabling this button):
    check the new state for all buttons

    if all buttons will now be unselected:
      show all but the previously selected choice
      exit function

    hide the filtered items
    exit function

Вы можете использовать метод jQuery data или методы addClass и removeClass для сохранения текущего состояния isSelected на самой кнопке.