Question

我遇到一个困扰我的问题。

选择字段似乎无法正常工作，但是升/降按钮可以正常工作。我觉得我的代码一定有问题，但是不知道在哪里，因为在检查时没有通过控制台收到任何错误消息。任何帮助将不胜感激。

请谢谢。

HTML：

   <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="./assets/reset.css" rel="stylesheet"/>
        <link href="./style.css" rel="stylesheet"/>

          <title>MixItUp MultiFilter Demo - Selects</title>
    </head>
    <body>
        <form class="controls">
            <button type="reset" class="control control-text">Reset</button>

            <fieldset filter-group class="select-wrapper">
                <select>
                    <option value="">Color</option>
                    <option value=".green">Green</option>
                    <option value=".blue">Blue</option>
                    <option value=".pink">Pink</option>
                </select>
            </fieldset>

            <fieldset filter-group class="select-wrapper">
                <select>
                    <option value="">Shape</option>
                    <option value=".square">Square</option>
                    <option value=".circle">Circle</option>
                    <option value=".triangle">Triangle</option>
                </select>
            </fieldset>

            <fieldset filter-group class="select-wrapper">
                <select>
                    <option value="">Size</option>
                    <option value=".small">Small</option>
                    <option value=".medium">Medium</option>
                    <option value=".large">Large</option>
                </select>
            </fieldset>

            <div class="control-group">
                <button type="button" class="control control-sort mixitup-control-active
                " data-sort="default:asc">Asc</button>
                <button type="button" class="control control-sort" data-sort="default:desc">Desc</button>
            </div>
        </form>

        <div class="container">
            <div class="mix green small square"></div>
            <div class="mix green medium square"></div>
            <div class="mix blue large triangle"></div>
            <div class="mix pink large circle"></div>
            <div class="mix green small circle"></div>
            <div class="mix blue medium triangle"></div>
            <div class="mix pink medium square"></div>
            <div class="mix blue medium triangle"></div>
            <div class="mix pink small circle"></div>
            <div class="mix green large triangle"></div>
            <div class="mix blue small square"></div>
            <div class="mix pink small square"></div>
            <div class="mix green large square"></div>
            <div class="mix blue large circle"></div>

            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
        </div>


        <script src="./assets/mixitup.min.js" type="text/javascript"></script>


        <script src="./assets/mixitup-multifilter.js" type="text/javascript"></script>

        <script>

            var containerEl = document.querySelector('.container');

            var mixer = mixitup(containerEl, {
                multifilter: {
                    enable: true
                },
                animation: {
                    effects: 'fade translateZ(-100px)'
                }
            }); 
        </script>
    </body>

这是我正在运行的两个mixitup js的公共链接文件。

https://drive.google.com/file/d/1d0xWoy2sdBYABaJZVLy2D9Q5i8hzfecl/view?usp=sharing

https://drive.google.com/open?id=1bXstNSLtwGY2kbF0embLHD7bwZp8mvhQ

Mixitup选择字段不起作用，但适用于按钮

0 个答案: