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

试试这个：

$('#l1 li').click(function(){ //click on element of first list
    var val = $(this).html();
    $('#l2 li').each(function(){
        if($(this).html() == val){ // check if that element is present on the second list
            $('#l2').animate({
                scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop()
            }); // Now scroll to that element
        }   
    });
});

这是一个有效的JSFiddle。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <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>

在一个列表中选择项目，其他列表也应该显示相同

1 个答案: