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无法正常工作

回答

相关问题