jQueryのMixItUpコンテナに `fail`クラスが追加されました

Question

thisがなぜ動作するのですか？なぜ誰かがthis exampleが動作しない理由を説明できますか？

HTML以外の実際の違いはありませんが、これが壊れてしまうとは思いません。それとも？

2番目のスクリプトを実行するたびに、MixItUpはboard-listクラスにfailを追加します。

文字の制限は私の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級でブロックを見つけることtryesが、それはできません。私はあなたのフィドルを固定しましたhttps://jsfiddle.net/br3t/hq2j17yp/10/