Reputation: 71

javascript sort with data handlers issue

sorry if this is a stupid question but I'm a bit of a javascript novice and I'm trying to learn better programming instead of "cheating" and writing out each event type individually.

I can't seem to get this to run. The user clicks on a link at the top of the page with a data attribute with an event types ID number in it (data-event-type="1", etc). It should hide any events without that id number. JS and HTML is below.

JS fiddle with it all http://jsfiddle.net/96r9jqp6/

HTML

<div class="sort">
    <a href="#" class="eventSort" data-event-sort="0">All</a>
    <a href="#" class="eventSort" data-event-sort="1">Trainer</a>
    <a href="#" class="eventSort" data-event-sort="2">Conference</a>
</div>

<div class="events-container">
    <div class="eventsys-event-wrapper" data-event-type="1">
        event 1 info here
    </div>
     <div class="eventsys-event-wrapper" data-event-type="2">
        event 2 info here
    </div>
    <div class="eventsys-event-wrapper" data-event-type="1">
        event 3 info here
    </div>
    <div class="eventsys-event-wrapper" data-event-type="2">
        event 4 info here
    </div>
</div>

Javascript

<script src="text/javascript">
    $(document).ready(function(){   
        $('.eventSort').click(function(){
            if (event.preventDefault) event.preventDefault();
            else event.returnValue = false;
            var thisEventSort = $(this).attr("data-event-sort");
            if (thisEventSort = "0"){
                $('.eventsys-event-wrapper').show('fast');
                return;
            } else {
                $('.eventsys-event-wrapper').each(function(){
                    var thisEventType = $(this).attr("data-event-type");
                    if (thisEventType = thisEventSort) {
                        $(this).show('fast');
                    } else {
                        $(this).hide('fast');
                    }
                });                 
            }               
        });
    });
</script>

Upvotes: 0

Answers (4)

George

Reputation: 1582

I've updated your jsfiddle here

http://jsfiddle.net/96r9jqp6/5/

the most import piece is your use of the "=" operator

you need to use triple equal to test for equality instead of just one.

also when using data-* attributes, you should use the jquery .data() function to retrieve its values

$(document).ready(function(){   
    $('.eventSort').click(function(){
        if (event.preventDefault) event.preventDefault();
        else event.returnValue = false;
        var thisEventSort = $(this).data("event-sort");
        console.log(thisEventSort);
        if (thisEventSort === 0){
            $('.eventsys-event-wrapper').show('fast');
                return;
        } else {
            $('.eventsys-event-wrapper').each(function(){
                var thisEventType = $(this).data("event-type");
                if (thisEventType === thisEventSort) {
                    $(this).show('fast');
                } else {
                    $(this).hide('fast');
                }
            });                 
        }               
    });
});

Upvotes: 1

reyaner

Reputation: 2819

You didnt pass event also... so your if there is not needed... and use .data("event-sort") for this...

$(document).ready(function(){   
    $('.eventSort').click(function(event){
        event.preventDefault();
        var thisEventSort = $(this).data("event-sort");
        if (thisEventSort == "0"){
            $('.eventsys-event-wrapper').show('fast');
                return;
        } else {
            $('.eventsys-event-wrapper').each(function(){
                var thisEventType = $(this).attr("data-event-type");
                if (thisEventType == thisEventSort) {
                    $(this).show('fast');
                } else {
                    $(this).hide('fast');
                }
            });                 
        }               
    });
});

Upvotes: 1

adeneo

Reputation: 318232

Something like this

$('.eventSort').click(function(e){
    e.preventDefault();
    var thisEventSort = $(this).data("event-sort");
    $('.eventsys-event-wrapper').hide().filter(function() {
        return thisEventSort === 0 ? true : ($(this).data('event-type') == thisEventSort);
    }).show('fast');    
});

FIDDLE

Upvotes: 1