2

对 js/jQuery 来说仍然很新，但我认为将代码与 HTML 标记分开是最佳实践？

我正在使用http://plugins.compzets.com/animatescroll/animateScroll，我很惊讶地看到按钮上附加的代码像这样......

<div id="MainContent">

<ul id="Gallery" class="container gallery">

    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" class="destroy"/></a></li>
    <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" class="destroy"/></a></li>
    <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" class="destroy"/></a></li>
    <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" class="destroy"/></a></li>
    <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" class="destroy"/></a></li>
    <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" class="destroy"/></a></li>
    <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" class="destroy"/></a></li>
    <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" class="destroy"/></a></li>
    <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" class="destroy"/></a></li>
    <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" class="destroy"/></a></li>
    <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" class="destroy"/></a></li>
    <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" class="destroy"/></a></li>
    <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" class="destroy"/></a></li>
    <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" class="destroy"/></a></li>
    <li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" class="destroy"/></a></li>
    <li><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" class="destroy"/></a></li>
    <li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" class="destroy"/></a></li>
    <li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" class="destroy"/></a></li>
    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" class="destroy"/></a></li>
    <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" class="destroy"/></a></li>
    <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" class="destroy"/></a></li>
    <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" class="destroy"/></a></li>
    <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" class="destroy"/></a></li>
    <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" class="destroy"/></a></li>
    <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" class="destroy"/></a></li>
    <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" class="destroy"/></a></li>
    <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" class="destroy"/></a></li>
    <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" class="destroy"/></a></li>
    <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" class="destroy"/></a></li>
    <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" class="destroy"/></a></li>
    <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" class="destroy"/></a></li>
    <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" class="destroy"/></a></li>
    <li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" class="destroy"/></a></li>
</ul>
<button class="top">click me</button>

更奇怪的是，我尝试使用它（这是我问题的本质）但它不起作用！

jQuery：

<script src="text/javascript">
$(function() {
    $('.top').bind('click', function (){
    $('#Gallery').animatescroll();
});
});

</script>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../lib/animatescroll.js"></script>
4

1 回答 1

0

  1. 按照 Yury Tarabanko 的指示（在评论中）

  2. 试试这个代码......如果你的'.top'元素是动态生成的。

    $(document).ready(function () {
    $('body').on('click', '.top', function () {
        $('#Gallery').animatescroll();
    });
});

  3. 始终将依赖文件放在任何脚本之前：

    <script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../lib/animatescroll.js"></script>

<script src="text/javascript">
    $(document).ready(function () {
        $('.top').on('click', function (){
            $('#Gallery').animatescroll();
        });
    });

</script>

  4. 其余代码 (animatePlugin:) 与此无关。

于 2013-10-22T14:49:08.223 回答