JavaScript排序與數據處理程序問題

Question

對不起，如果這是一個愚蠢的問題，但我是一個JavaScript新手，我試圖學習更好的編程，而不是「作弊」，並寫出每個事件類型單獨。

我似乎無法得到此運行。用戶點擊頁面頂部的鏈接，其中帶有一個事件類型ID號的數據屬性（data-event-type =「1」等）。它應該隱藏沒有該ID號的任何事件。 JS和HTML在下面。

JS撥弄着這一切 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> 

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/

最進口片是你的使用「 =「運營商

你需要使用三等於測試的平等而不是一個。

也使用數據 - *屬性時，你應該使用jQuery的。數據（）函數來檢索其值

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