Как показать по умолчанию второй класс в jquery, а не все на каждой странице загрузки

0

Как я могу на каждой странице загружать только элементы второго класса (data-color = "Blue") вместо всех элементов?

Ссылка JSFiddle: http://jsfiddle.net/Cr2cY/

JQuery:

$(document).ready(function () {
$('#filterOptions li a').click(function () {
    // fetch the class of the clicked item
    var ourDataAttr = $(this).data('color');
    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');
    if (ourDataAttr == 'All') {
        // show all our items
        $('#content').find('.item').show();
    } else {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide();
        // show all elements that do share ourClass
        $('#content').find('.item[data-color="' + ourDataAttr + '"]').show();
    }
    return false;
});

});

Html

<div id="container">
<ul id="filterOptions">
    <li class="active"><a href="#" class="All" data-color="All">All</a></li>
    <li><a href="#" class="Blue" data-color="Blue">Blue</a></li>
    <li><a href="#" class="Red" data-color="Red">Red</a></li>
    <li><a href="#" class="Black" data-color="Black">Black</a></li>
    <li><a href="#" class="White" data-color="White">White</a></li>
</ul>
<div id="content">
    <ul>
        <li class="item Blue" data-color="Blue">Blue 1</li>
        <li class="item Blue" data-color="Blue">Blue 2</li>
        <li class="item Red" data-color="Red">Red 1</li>
        <li class="item Red" data-color="Red">Red 2</li>
        <li class="item Black" data-color="Black">Black 1</li>
        <li class="item Black" data-color="Black">Black 2</li>
        <li class="item White" data-color="White">White 1</li>
        <li class="item White" data-color="White">White 2</li>
    </ul>
</div>

  • 0
    Ты имеешь ввиду, что хочешь показывать только "Синий" при загрузке страницы и не все? В том, что?
  • 0
    Да, только "синий". "Категория Синий" выбрала все свои пункты.
Показать ещё 1 комментарий
Теги:

3 ответа

2
Лучший ответ

Вы должны выполнить click() [jQuery] для элемента по умолчанию в вашем $(document).ready:

$('#filterOptions a.Blue').click();

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

Поделиться
  • 0
    Поправьте меня, если я не прав ... вопрос в том, чтобы при загрузке страницы показывался только СИНИЙ.
1

Это было бы самым быстрым способом:

$(".Blue").click();

http://jsfiddle.net/Cr2cY/6/

Поделиться
  • 0
    Поправьте меня, если я не прав ... вопрос в том, чтобы при загрузке страницы показывался только СИНИЙ.
  • 0
    Это будет сделано: .click () вызывает поддельное событие click, которое запускает обратный вызов в контексте элемента «clicked», поэтому он просто использует его уже существующую логику для достижения этого. попробуйте скрипку и убедитесь сами.
Показать ещё 1 комментарий
0

Если я правильно понял ваш вопрос, вы хотите показывать только BLUE, а не все, когда загружается страница. Если да, попробуйте это ниже.

Сценарий: http://jsfiddle.net/Purus/Cr2cY/8/

$(document).ready(function () {
 $('#content').find('.item:not([data-color="Blue"])').hide();

 $('#filterOptions li a').click(function () {
    // fetch the class of the clicked item
    var ourDataAttr = $(this).data('color');
    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');
    if (ourDataAttr == 'All') {
        // show all our items
        $('#content').find('.item').show();
    } else {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide();
        // show all elements that do share ourClass
        $('#content').find('.item[data-color="' + ourDataAttr + '"]').show();
    }
    return false;
});

});

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню