Element filtrujący oparty na kluczu / wartości .data ()

Powiedzmy, że mam 4 elementy div z klasą .navlink, które po kliknięciu służą .data()do ustawiania wywoływanego klucza 'selected'na wartość true:

$('.navlink')click(function() { $(this).data('selected', true); })

Za każdym razem, gdy .navlinkkliknięto nowy , chciałbym zapisać poprzednio wybrany navlinkdo późniejszej manipulacji. Czy istnieje szybki i łatwy sposób na wybranie elementu na podstawie tego, co zostało zapisane przy użyciu .data()?

Wygląda na to, że nie ma żadnych filtrów jQuery : pasujących do rachunku i próbowałem wykonać następujące czynności (w ramach tego samego zdarzenia kliknięcia), ale z jakiegoś powodu to nie działa:

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

Wiem, że są inne sposoby, aby to osiągnąć, ale w tej chwili jestem po prostu ciekawy, czy można to zrobić za pomocą .data().

twój filtr zadziałałby, ale musisz zwrócić true na pasujących obiektach w funkcji przekazanej do filtra, aby je przechwycił.

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

Tylko dla porządku, to można filtrować dane z jQuery (to pytanie jest dość stary i jQuery ewoluowała od tego czasu, więc jest to prawo do pisania tego rozwiązania, jak również):

$('.navlink[data-selected="true"]');

lub lepiej (dla wydajności):

$('.navlink').filter('[data-selected="true"]');

lub jeśli chcesz otrzymać wszystkie elementy z data-selectedset:

$('[data-selected]')

Zauważ, że ta metoda będzie działać tylko z danymi, które zostały ustawione za pomocą atrybutów html. Jeśli ustawisz lub zmienisz dane za pomocą .data()wywołania, ta metoda nie będzie już działać.

Możemy łatwo stworzyć wtyczkę:

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

Użycie (sprawdzanie przycisku radiowego):

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

Zauważyłem dwie rzeczy (mogą to być jednak błędy z czasu, gdy to zapisałeś).

1. W pierwszym przykładzie przegapiłeś kropkę ( $('.navlink').click)
2. Aby filtr działał, musisz zwrócić wartość ( return $(this).data("selected")==true)

Brzmi jak więcej pracy niż jej wartość.

1) Dlaczego nie mieć tylko jednej zmiennej JavaScript, która przechowuje odniesienie do aktualnie wybranego elementu \ jQuery obiektu.

2) Dlaczego nie dodać klasy do aktualnie wybranego elementu. Następnie możesz zapytać DOM o klasę „.active” lub coś w tym stylu.