Question

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>

Answer 1

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

尝试使用此代码...以防您的'.top'元素动态生成。

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

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

<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>

其余的代码（animatePlugin :)在这里无关。

无法将animatescroll插件挂钩到绑定方法

1 个答案: