Javascript 单击时列表不会滚动
我的html代码中有两个相同的列表，我希望如果我在一个列表中选择一个元素，那么另一个列表应该自动滚动到其中的元素，因为我已经编写了下面的代码，但这不起作用，这意味着当我单击列表-1中的任何元素时，列表-2中不会发生任何事情。我正在windows 8.1上使用chrome浏览器。请解决这个问题 这是我的代码：Javascript 单击时列表不会滚动,javascript,jquery,Javascript,Jquery,我的html代码中有两个相同的列表，我希望如果我在一个列表中选择一个元素，那么另一个列表应该自动滚动到其中的元素，因为我已经编写了下面的代码，但这不起作用，这意味着当我单击列表-1中的任何元素时，列表-2中不会发生任何事情。我正在windows 8.1上使用chrome浏览器。请解决这个问题 这是我的代码： <!DOCTYPE html> <html> <head> <script src="https://ajax.googl
<!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>
我刚刚创建了一个JSFIDLE，它可以工作。我发现代码中唯一的一点是缺少
$(function()
{
// Insert code here
});
问题是您的程序在构建DOM之前正在执行代码 您必须使用$document.readyfunction{}，这意味着您的代码将在加载DOM时执行 $document.readyfunction{ $'l1 li'。单击函数{ var val=$this.html； $'l2 li'。每个函数{ $this.css'color'，'black'； 如果$this.html==val{ $this.css'color'，'red'； $'l2'。设置动画{ scrollTop:$this.offset.top-$'l2'.offset.top+$'l2'.scrollTop }; } }; }; }; 红色 绿色 蓝色 黄的 黑色 橙色 紫色 粉红色 灰色 棕色的 紫色 粉红色 灰色 棕色的 红色 绿色 蓝色 黄的 黑色 橙色
这不依赖于任何浏览器或任何操作系统，只需将脚本标记代码替换为
<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()
});
}
});
});
});
您正在加载元素之前绑定click事件。把你的js放在最后一个body标签中，如下所示。希望这对你有帮助 红色 绿色 蓝色 黄的 黑色 橙色 紫色 粉红色 灰色 棕色的 紫色 粉红色 灰色 棕色的 红色 绿色 蓝色 黄的 黑色 橙色 $'l1 li'。单击函数{ var val=$this.html； $'l2 li'。每个函数{ $this.css'color'，'black'； 如果$this.html==val{ $this.css'color'，'red'； $'l2'。设置动画{ scrollTop:$this.offset.top-$'l2'.offset.top+$'l2'.scrollTop }; } }; };