Question

我一直在讨论一些我认为很简单的小代码，但不知何故我找不到它的错误（我的错误）。

我正在开发一个可以过滤事件的网站。过滤器是一个带有下拉菜单的表单，事件带有关于它们是什么类型的事件的html数据标签。

指的是数据标记等于所选选项的任何事件都删除了“隐藏”类，否则添加了“隐藏”。

在控制台日志中，我很好地获得了所选的选项和数据标记，但是，我提交的用于过滤所有事件的文件让“隐藏”类。

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>&euro; 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>&euro; 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&amp;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>&euro; 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');
        }
    });
}
});

我可能做错了，但我只是看不到它。

Answer 1

使用$selected.val()获取select的值。

if ($eventtype == $selected.find("option:selected").val()){
            $this.removeClass('hide');
        } else {
            $this.addClass('hide');
        }

将所选选项与数据属性进行比较的问题

1 个答案: