我一直在摸索一些我认为很简单的代码，但不知怎么的，我找不到其中的错误。
我正在开发一个可以过滤事件的网站。过滤器是一个带有下拉菜单的表单，事件携带关于它们是什么类型的事件的html数据标记。数据标记等于所选选项的任何事件都已删除类"hide"，否则将添加该类。
在控制台日志中，我很好地获得了所选的选项和数据标记，然而，我提交来过滤所有事件的数据标记会得到类"隐藏"。
HTML：
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>InfinityPlanner.net</title>
<meta name="description" content="">
<meta name="viewport" content=" width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Place favicon.ico in the root directory -->
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
<!-- HEADER -->
<div class="headerBackground">
<header class="grid-container">
<img src="images/infinity2.png" alt="">
</header>
</div>
<!-- FILTER -->
<div class="grid-container">
<form id="filterForm">
<div class="grid-20">
<select class="type filter" name="type">
<option value="ITS">ITS</option>
<option value="Casual">Casual</option>
<option value="Tournament">Tournament</option>
<option value="Event">Event</option>
</select>
</div>
<div class="grid-20">
<input type="submit" class="filter submit" id="submit" value="FILTER >>">
</div>
</form>
</div>
<!-- EVENTS -->
<div class="fullScreenPane grid-container">
<div class="grid-33">
<div class="events" data-event="Casual">
<h2>Thursday Night Infinity</h2>
<h3>Casual</h3>
<hr>
<ul>
<li>2015-02-26</li>
<li>€ 0.00</li>
<li>Gamers of the West</li>
<li></li>
</ul>
<p><p>Elke donderdag avond gamen bij Gamers of the West. Van ITS scenario's tot YAMS!</p></p>
</div>
</div>
<div class="grid-33">
<div class="events" data-event="Tournament">
<h2>Rotterdam Infinity Cup</h2>
<h3>Tournament</h3>
<hr>
<ul>
<li>2015-02-28</li>
<li>€ 7.50</li>
<li>Gamers of the West</li>
<li>Rotterdam</li>
<li><a href="https://www.facebook.com/events/387748111350209/?ref_newsfeed_story_type=regular&fref=nf" target="_blank">Website</a></li>
</ul>
<p><p>Who will be hunter and who will be prey? Come and join us and get the only Rotterdam Infinity Counter Pack part 1!</p></p>
</div>
</div>
<div class="grid-33">
<div class="events" data-event="ITS">
<h2>N3 ITS 2015 Tafelridder</h2>
<h3>ITS</h3>
<hr>
<ul>
<li>2015-04-12</li>
<li>€ 10.00</li>
<li>De Tafelridder, Leiden</li>
<li></li>
<li><a href="http://www.tafelridder.nl" target="_blank">Website</a></li>
</ul>
<p><p>Come to our second Infinity Event at the Tafelridder.</p><p>For now we will work towards N3 ITS 2015 Rules at 300 points. May change later; final rulespack will be published a month before the event.</p><p>Hope people are excited; we are!</p></p>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<h3>Powered by:</h3>
<a href="http://www.gamersofthewest.com/"><img src="images/GOTW.jpg" alt="Gamers of the West"></a>
<a href="http://www.data-sphere.net"><img src="images/logo.png" alt="DataSpehe"></a>
</footer>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/main.js"></script>
</body>
</html>
JavaScript文件：
$(document).ready(function() {
// vars
var $form = $('#filterForm');
// On submit.
$form.submit(function (e){
e.preventDefault();
var $selected = $('select.type');
filterEvents($selected);
});
// Filter events.
function filterEvents($selected){
console.log($selected);
// check data attribute for each event.
$('.events').each(function($selected){
var $this = $(this),
$eventtype = $(this).data('event');
console.log('eventtype = '+$eventtype);
if ($eventtype == $selected){
$this.removeClass('hide');
} else {
$this.addClass('hide');
}
});
}
});
我可能做错了什么，但我就是看不出来。
使用$selected.val()获取select的值。
if ($eventtype == $selected.find("option:selected").val()){
$this.removeClass('hide');
} else {
$this.addClass('hide');
}