shuffleJs無法正常工作

我在解決此問題時遇到問題。我是新來的JavaScript和我使用https://github.com/Vestride/Shuffle 和額外的幫助我這個教程休耕沿https://www.youtube.com/watch?v=t9Wct6cGugA shuffleJs無法正常工作

我覺得自己正確鍵入這一切，（即使它是在德國），但它不工作正確。請原諒我，因爲我仍然在學習通過閱讀來區分jQuery和JavaScript。我的按鈕沒有給我像教程中所需的結果。任何幫助非常感謝！

$(function() { 
 
    gridContainer = $('#shuffleContainer'); 
 
    var sizer = gridContainer.find('.col-md-4'); 
 

 
    gridContainer.shuffle ({ 
 
     sizer: sizer, 
 
     speed: 500, 
 
     easing: 'ease-out' 
 
    }); 
 

 
    $('#btnAll').on('click', function() { 
 
     gridContainer.shuffle('shuffle', function($el, shuffle) { 
 
      return true; 
 
     }); 
 
    }); 
 

 
    $('#btnFurniture').on('click', function() { 
 
     gridContainer.shuffle('shuffle', function($el, shuffle) { 
 
      return $el.data('group') == 'Furniture'; 
 
     }); 
 
    }); 
 

 
    $('#btnPet').on('click', function() { 
 
     gridContainer.shuffle('shuffle', function($el, shuffle) { 
 
      return $el.data('group') == 'Pet'; 
 
     }); 
 
    }); 
 

 
    $('#btnElectronic').on('click', function() { 
 
     gridContainer.shuffle('shuffle', function($el, shuffle) { 
 
      return $el.data('group') == 'Electronic'; 
 
     }); 
 
    }); 
 

 
    $('#btnTransportation').on('click', function() { 
 
     gridContainer.shuffle('shuffle', function($el, shuffle) { 
 
      return $el.data('group') == 'Transportation'; 
 
     }); 
 
    }); 
 
});

h1 { 
 
    margin-bottom: 20px; 
 
} 
 
.container { 
 
    padding-top: 50px; 
 
} 
 
.selector { 
 
    margin-top: 20px; 
 
} 
 
#shuffleContainer { 
 
    margin-top: 10px; 
 
} 
 

 
.col-md-4 { 
 
    margin-bottom: 150px; 
 
    height: 270px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0 initial-scale=1" /> 
 
    <title>My Shuffle Demo</title> 
 

 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
 
    <link href="css/style.css" rel="stylesheet" /> 
 

 
    <script src="Scripts/jquery-1.11.0.js"></script> 
 
    <script src="Scripts/bootstrap.js"></script> 
 
    <script src="shuffle/shuffle.js"></script> 
 
    <script src="js/script.js"></script> 
 
    <script src="Scripts/jquery.shuffle.js"></script> 
 
    <script src="Scripts/jquery.shuffle.modernizr.js"></script> 
 

 

 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
     <h1>Shuffle.js Demo</h1> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
       Shuffle.js is the best <a href="http://vestride.github.io/Shuffle/">Shuffle It Up!</a> 
 
      </div> 
 
     </div> 
 
     <div class="row selector"> 
 
      <div class="col-md-12"> 
 
       <div class="btn-group"> 
 
        <button type="button" class="btn btn-default" id="btnAll">All</button> 
 
        <button type="button" class="btn btn-default" id="btnFurniture">Furniture</button> 
 
        <button type="button" class="btn btn-default" id="btnPet">Pet</button> 
 
        <button type="button" class="btn btn-default" id="btnElectronic">Electronic</button> 
 
        <button type="button" class="btn btn-default" id="btnTransportation">Transportation</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div id="shuffleContainer" class="row"> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/blackChair.jpg" class="img-responsive"/> 
 
      </div> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/blackBed.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="pet"> 
 
       <img src="image/blackKitten.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="transportation"> 
 
       <img src="image/blueBike.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/blueChair.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="transportation"> 
 
       <img src="image/chromeBike.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="pet"> 
 
       <img src="image/grayCat.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="electronic"> 
 
       <img src="image/iphone.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="pet"> 
 
       <img src="image/jindoDog.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="electronic"> 
 
       <img src="image/lenovoLap.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="electronic"> 
 
       <img src="image/macBook.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="pet"> 
 
       <img src="image/monkey.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/orangeBed.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="pet"> 
 
       <img src="image/penisCat.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/pinkBed.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="pet"> 
 
       <img src="image/pugDog.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/PurpleChair.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/redChair.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="electronic"> 
 
       <img src="image/samsungEdge.jpg" class="img-responsive" /> 
 
      </div> 
 
      <div class="col-md-4" data-group="furniture"> 
 
       <img src="image/yellowChair.jpg" class="img-responsive" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
</body> 
 
</html>

來源

2016-02-26 M4cJunk13

我能夠重現您在小提琴問題和發現的原因。在點擊事件中，您遇到了區分大小寫的問題Transportation。它應該與data-group="transportation"

區分大小寫的值的解決將是調整的單擊事件的情況：

$('#btnTransportation').on('click', function() { 
    gridContainer.shuffle('shuffle', function($el, shuffle) { 
     return $el.data('group') == 'transportation'; 
    }); 
});

檢查working demo。

希望它有幫助！

來源

2016-02-26 05:23:49

呃！你有我！就是這樣。多麼尷尬！非常感謝你，我來自VB.net，語言不區分大小寫。再次，我不能夠感謝你。 – M4cJunk13

@ M4cJunk13酷！請介意選擇我的答案作爲正確的答案並註冊登錄。 :) –

我檢查它是正確的答案，但它不會讓我投票，因爲我的代表太低。對不起，對Stackoverflow來說還是個新手。 – M4cJunk13

shuffleJs無法正常工作

回答

相關問題