Question

我的html代码中有两个相同的列表，我希望如果我在一个列表中选择一个元素，那么另一个列表应该自动滚动到其中的元素，因为我已经编写了下面的代码但是这不起作用，意思是当我点击list-1中的任何元素时，list-2中不会发生任何事情。我在Windows 8.1上使用chrome浏览器。请解决问题。

这是我的代码：

<!DOCTYPE html>
 <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $('#l1 li').click(function() {
                var val = $(this).html();
                $('#l2 li').each(function() {
                    $(this).css('color','black');
                    if($(this).html() == val) {
                        $(this).css('color','red');
                        $('#l2').animate({
                            scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop()
                        });
                    }     
                });
            });
        </script>
    </head>
    <body>
        <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px">
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
            <li>black</li>
            <li>orange</li>
            <li>purple</li>
            <li>pink</li>
            <li>grey</li>
            <li>brown</li>
        </ul>
        <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px">
            <li>purple</li>
            <li>pink</li>
            <li>grey</li>
            <li>brown</li>
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
            <li>black</li>
            <li>orange</li>
        </ul>
    </body>
</html>

Answer 1

我刚刚创建了一个jsfiddle并且它可以找到“Use this module. Works perfectly :)”代码中唯一的东西就是你错过了

{{1}}

Answer 2

问题是你在构建DOM之前正在执行代码。

您必须使用$(document).ready(function(){})，这意味着您的代码将在加载DOM时执行。

＆＃13;

<!DOCTYPE html>
 <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
        $(document).ready(function () {
          $('#l1 li').click(function() {
                var val = $(this).html();
                $('#l2 li').each(function() {
                    $(this).css('color','black');
                    if($(this).html() == val) {
                        $(this).css('color','red');
                        $('#l2').animate({
                            scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop()
                        });
                    }     
                });
            });
        });
        </script>
    </head>
    <body>
        <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px">
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
            <li>black</li>
            <li>orange</li>
            <li>purple</li>
            <li>pink</li>
            <li>grey</li>
            <li>brown</li>
        </ul>
        <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px">
            <li>purple</li>
            <li>pink</li>
            <li>grey</li>
            <li>brown</li>
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
            <li>black</li>
            <li>orange</li>
        </ul>
    </body>
</html>

＆＃13;

Answer 3

这不依赖于任何浏览器或任何操作系统，只需用此

替换脚本标记代码即可

<script>
$(document).ready(function () {
    $('#l1 li').click(function () {
        var val = $(this).html();
        $('#l2 li').each(function () {
            $(this).css('color', 'black');
            if ($(this).html() == val) {
                $(this).css('color', 'red');
                $('#l2').animate({
                    scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop()
                });
            }
        });
    });
});

Answer 4

您在加载元素之前绑定click事件。将您的js放在最后一个body标记中，如下所示。希望这会帮助你。

 <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        
    </head>
    <body>
        <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px">
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
            <li>black</li>
            <li>orange</li>
            <li>purple</li>
            <li>pink</li>
            <li>grey</li>
            <li>brown</li>
        </ul>
        <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px">
            <li>purple</li>
            <li>pink</li>
            <li>grey</li>
            <li>brown</li>
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
            <li>black</li>
            <li>orange</li>
        </ul>
        <script>
            $('#l1 li').click(function() {
                var val = $(this).html();
                $('#l2 li').each(function() {
                    $(this).css('color','black');
                    if($(this).html() == val) {
                        $(this).css('color','red');
                        $('#l2').animate({
                            scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop()
                        });
                    }     
                });
            });
        </script>
    </body>
</html>

列表不会在点击时滚动

4 个答案: