Question

我正在尝试构建一个图像库，它既可以是垂直滚动，也可以通过使用next / prev按钮进行导航。

每个图片的ID范围为1-31，并且基本上希望使用它们的ID来影响scrollTop。但是我收到了一个错误：

未捕获的TypeError：无法读取未定义的属性“top” 在HTMLButtonElement。（01.html：70）在HTMLButtonElement.dispatch（jquery-3.1.0.js：5110）

以下是代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../style01.css">
<script src="../jquery-3.1.0.js"></script>
</head>

<body>

<div id="show-info">
<i>The Four Seasons </i> <BR>
May 30 - Jul 16, 2015<BR>
<BR>
Night Gallery<BR>
Los Angelos, CA<br>

<button class="prev">prev</button>/
<button class="next">next</button>

</div>


<div id="exterior-container">
<div id="project-container"
<img  id="1" src="../Projects/Images/Night/01.jpg" class="long"> <br>
<img  id="2" src="../Projects/Images/Night/02.jpg" class="long"> <br>
<img  id="3" src="../Projects/Images/Night/03.jpg" class="long"> <br>
<img  id="4" src="../Projects/Images/Night/04.jpg" class="long"> <br>
<img  id="5" src="../Projects/Images/Night/05.jpg" class="long"> <br>
<img  id="6" src="../Projects/Images/Night/06.jpg" class="long"> <br>
<img  id="7" src="../Projects/Images/Night/07.jpg" class="long"> <br>
<img  id="8" src="../Projects/Images/Night/08.jpg" class="long"> <br>
<img  id="9" src="../Projects/Images/Night/09.jpg" class="tall"> <br>
<img  id="10" src="../Projects/Images/Night/10.jpg" class="long"> <br>
<img  id="11" src="../Projects/Images/Night/11.jpg" class="long"> <br>
<img  id="12" src="../Projects/Images/Night/12.jpg" class="long"> <br>
<img  id="13" src="../Projects/Images/Night/13.jpg" class="long"> <br>
<img  id="14" src="../Projects/Images/Night/14.jpg" class="tall"> <br>
<img  id="15" src="../Projects/Images/Night/15.jpg" class="long"> <br>
<img  id="16" src="../Projects/Images/Night/16.jpg" class="tall"> <br>
<img  id="17" src="../Projects/Images/Night/17.jpg" class="long"> <br>
<img  id="18" src="../Projects/Images/Night/18.jpg" class="tall"> <br>
<img  id="19" src="../Projects/Images/Night/19.jpg" class="tall"> <br>
<img  id="20" src="../Projects/Images/Night/20.jpg" class="tall"> <br>
<img  id="21" src="../Projects/Images/Night/21.jpg" class="long"> <br>
<img  id="22" src="../Projects/Images/Night/22.jpg" class="long"> <br>
<img  id="23" src="../Projects/Images/Night/23.jpg" class="tall"> <br>
<img  id="24" src="../Projects/Images/Night/24.jpg" class="tall"> <br>
<img  id="25" src="../Projects/Images/Night/25.jpg" class="tall"> <br>
<img  id="26" src="../Projects/Images/Night/26.jpg" class="tall"> <br>
<img  id="27" src="../Projects/Images/Night/27.jpg" class="tall"> <br>
<img  id="28" src="../Projects/Images/Night/28.jpg" class="long"> <br>
<img  id="29" src="../Projects/Images/Night/29.jpg" class="tall"> <br>
<img  id="30" src="../Projects/Images/Night/30.jpg" class="long"> <br>
<img  id="31" src="../Projects/Images/Night/31.jpg" class="long"> <br>
</div>
</div>


</body>
<script>

    var id = 1;
    var container = $('#project-container');
    var scrollTo = $('#'+id);

    $('.next').click(function(){
    console.log(scrollTo);
    container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
     );
    id++;   
})


</script>
</html>

Answer 1

ID 不能是数字。 1,2,3，...，9999等不有效id属性。

将您的图片id从1更改为类似image-1的内容，它应该有效。

你的JS会看起来像这样：

    var id = 1;
    var container = $('#project-container');
    var scrollTo = $('#image-'+id);

    $('.next').click(function(){
    console.log(scrollTo);
    container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
     );
    id++;   
})

HTML4 spec for reference:

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（＆＃34; - ＆＃34 ;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

Answer 2

首先，您需要结束此行<div id="project-container">。

我为您创建了一个小小提琴，没有迭代和对ID的引用：https://jsfiddle.net/wk6bhejt/

将变量用于Jquery选择器

2 个答案: