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

抱歉，如果这是一个愚蠢的问题，但我是一个javascript新手，我正在努力学习更好的编程，而不是“作弊”和单独写出每个事件类型

我似乎无法让它运行。用户单击页面顶部带有数据属性的链接，其中包含事件类型ID号（data event type=“1”等）。它应该隐藏没有该id号的任何事件。下面是JS和HTML

这一切都要摆弄

HTML

事件1信息在此
事件2信息在此
事件3信息在此
事件4信息在此

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>

$（文档）.ready（函数（）{
$（'.eventSort'）。单击（函数（）{
if（event.preventDefault）event.preventDefault（）；
else event.returnValue=false；
var thisEventSort=$（this.attr（“数据事件排序”）；
如果（thisEventSort=“0”）{
$（'.eventsys事件包装器'）.show（'fast'）；
返回；
}否则{
$（'.eventsys事件包装器'）。每个（函数（）{
var thisEventType=$（this.attr（“数据事件类型”）；
if（thisEventType=thisEventSort）{
$（this.show（'fast'）；
}否则{
$（this.hide（'fast'）；
}
});                 
}               
});
});

需要

if (thisEventSort === "0")

if (thisEventType === thisEventSort)

我也是

if (thisEventType = thisEventSort) 

需要

if (thisEventSort === "0")

if (thisEventType === thisEventSort)

需要

if (thisEventSort === "0")

if (thisEventType === thisEventSort)

我也是

if (thisEventType = thisEventSort) 

需要

if (thisEventSort === "0")

if (thisEventType === thisEventSort)

像这样的

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

类似这样的东西

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

---

您没有通过

事件

也。。。所以你的

如果不需要的话。。。
并使用
.data（“事件排序”）
进行此

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

您没有通过
事件
也。。。所以你的
如果不需要的话。。。
并使用
.data（“事件排序”）
进行此

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

我已经在这里更新了你的JSFIDLE


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

您需要使用triple equal来测试相等性，而不是仅使用一个

另外，在使用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');
                }
            });                 
        }               
    });
});

我已经在这里更新了你的JSFIDLE


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

您需要使用triple equal来测试相等性，而不是仅使用一个

另外，在使用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');
                }
            });                 
        }               
    });
});

呸，这让它工作得很完美。我不确定我是否应该为自己的代码工作完美而感到自豪，或者因为没有使用正确的运算符而感觉自己像个白痴。呸，这让它工作得非常完美。我不确定我是否应该为自己的代码工作完美而感到自豪，或者因为没有使用正确的运算符而感觉自己像个白痴。谢谢你的回复！我的本地副本上有一个事件，但出于某种原因，我把它带到了这里！，使用.data over.attr除了.data之外，还有什么特别的原因吗？感谢您的回复！我的本地副本上有一个事件，但出于某种原因，我把它带到了这里！，使用.data over.attr除了.data之外，还有什么特别的原因吗？感谢您的回复！使用.data over.attr除了.data之外还有什么特别的原因吗？对于检索，我认为没有什么区别，但我相信jquery数据函数实际上在元素上创建了一个对象，因此可以存储复杂的对象（不仅仅是字符串）关于元素，这对未来来说是有趣和好的。再次感谢你！我会仔细研究的！谢谢你的回复！使用.data over.attr除了.data之外还有什么特别的原因吗？对于检索，我认为没有什么区别，但我相信jquery数据函数实际上在元素上创建了一个对象，因此可以存储复杂的对象（不仅仅是字符串）关于元素，这对未来来说是有趣和好的。再次感谢你！我会仔细研究的！