在`jQuery

Question

有人可以帮助解释为什么this有效，但this example没有？

除了HTML之外，我没有看到任何真正的区别，但我不认为这会破坏它。或者是吗？

每次运行第二个脚本时，MixItUp都会将fail添加到我的board-list课程中。

字符限制意味着我无法在此处添加我的JS，但您可以在Demo/FIDDLE中找到它。

我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2"></script>

<!-- The buttons -->
<ul>
    <li>
        <button class="btn-boo filter no-border" data-filter=".social"> Future</button>
    </li>
    <li>
        <button class="btn-boo filter no-border" data-filter=".mainboard"> Mainboard</button>
    </li>
    <li>
        <button class="btn-boo filter no-border" data-filter=".new-faces"> New Faces</button>
    </li>
</ul>

<!-- The grid -->
<!-- Board Pictures -->
<div class="board-bloc">
    <div class="board-container">
        <ul id="models-cnt" class="board-list">

            <!-- Board Item -->
            <li class="board-item new-faces">

                <a class="no-border board-item-image-link" href="#">
                    <div class="board-social-details">
                        <ul class="board-social-icons">
                            <li><img class="board-social-fb" src="img/social-facebook-white.svg" alt="Facebook Icon"></li>
                            <li><img class="board-social-tw" src="img/social-twitter-white.svg" alt="Twitter Icon"></li>
                            <li><img class="board-social-in" src="img/social-instagram-white.svg" alt="Instagram Icon"></li>
                        </ul>

                        <p class="board-social-count">4.5K</p>
                    </div>

                  <img class="board-item-image" src="http://placehold.it/200x200" alt="Model Thumb">
                </a>

                <div class="board-info">
                    <p class="board-name"><a class="no-border" href="#">Adriana Bucur</a></p>
                    <span class="board-favourite-star"><a class="no-border" href="#"><img src="img/favourite-star.svg" alt="Favourite"></a></span>
                    <span class="board-favourite-star item-favourited"><a class="no-border" href="#"><img src="img/favourite-star-full.svg" alt="Favourite"></a></span>
                </div>
            </li>
            <!-- Board Item End -->

            <!-- Board Item -->
            <li class="board-item mainboard">

                <a class="no-border board-item-image-link" href="#">
                    <div class="board-social-details">
                        <ul class="board-social-icons">
                            <li><img class="board-social-fb" src="img/social-facebook-white.svg" alt="Facebook Icon"></li>
                            <li><img class="board-social-tw" src="img/social-twitter-white.svg" alt="Twitter Icon"></li>
                            <li><img class="board-social-in" src="img/social-instagram-white.svg" alt="Instagram Icon"></li>
                        </ul>

                        <p class="board-social-count">4.5K</p>
                    </div>

                    <img class="board-item-image" src="http://placehold.it/200x200" alt="Model Thumb">
                </a>

                <div class="board-info">
                    <p class="board-name"><a class="no-border" href="#">Adriana Bucur</a></p>
                    <span class="board-favourite-star"><a class="no-border" href="#"><img src="img/favourite-star.svg" alt="Favourite"></a></span>
                    <span class="board-favourite-star item-favourited"><a class="no-border" href="#"><img src="img/favourite-star-full.svg" alt="Favourite"></a></span>
                </div>
            </li>
            <!-- Board Item End -->

        </ul>
    </div>
</div>
<!-- Board Pictures End -->

Answer 1

它试图找到mix - 类的块，但它不能。我已经修复了你的小提琴https://jsfiddle.net/br3t/hq2j17yp/10/