Question

抱歉，如果这是一个愚蠢的问题，但我是一个javascript新手，我试图学习更好的编程，而不是＆＃34;作弊＆＃34;并单独写出每个事件类型。

我似乎无法让它运行起来。用户点击页面顶部的链接，其中包含一个数据属性，其中包含事件类型ID号（data-event-type =＆＃34; 1＆＃34;等）。它应该隐藏没有该ID号的任何事件。 JS和HTML如下。

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>

Answer 1

if (thisEventSort = "0")

需要

if (thisEventSort === "0")

和

相同

if (thisEventType = thisEventSort)

需要

if (thisEventType === thisEventSort)

Answer 2

像这样的东西

$('.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

Answer 3

你还没有通过event ...所以你的if不需要...... 并使用.data("event-sort") ...

$(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');
                }
            });                 
        }               
    });
});

Answer 4

我在这里更新了你的jsfiddle

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

最重要的是您使用“=”运算符

你需要使用三等于测试相等而不是一个。

当使用data- *属性时，你应该使用jquery .data（）函数来检索它的值

$(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');
                }
            });                 
        }               
    });
});

javascript与数据处理程序排序问题

4 个答案: