使用Jquery Slider获取下一个锚点对象时出现问题
Trouble Getting Next Anchor Object with Jquery Slider
首先，我想说我是Jquery的新手，我正试图通过创建一个自定义的图像滑块来自学。我有滑块本身工作的渐变效果刚刚好与这个代码：
Javascript：
$(document).ready(
$(
$(function(){
$('.moonslide img:gt(0)').hide();
setInterval(function(){$('.moonslide img:first').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.moonslide');}, 6000);
})
));
HTML
<div id="viewport">
<div id="topslider">
<div class="moonslide">
<img src="/images/Slider/filer.jpg" class="slimage" id="ms0">
<img src="/images/Slider/greenroom.jpg" class="slimage" id="ms1">
<img src="/images/Slider/ng1.png" class="slimage" id="ms2">
<img src="/images/Slider/ngs.png" class="slimage" id="ms3">
<img src="/images/Slider/worldworks.jpg" class="slimage" id="ms4">
</div>
</div>
<div id="linkul" class="moonslidelinks">
<a href="#" id="ml0">Slide 1</a><br />
<a href="#" id="ml1">Slide 2</a><br />
<a href="#" id="ml2">Slide 3</a><br />
<a href="#" id="ml3">Slide 4</a> <br />
<a href="#" id="ml4">Slide 5</a><br />
</div>
</div>
我想尝试的下一件事是用它来制作导航列表的动画。我开始尝试的第一件事就是在显示相应的图像时，简单地将链接颜色从蓝色变为白色（我已经添加了Jquery颜色插件来制作css的动画）。我假设在每个动作中添加两个效果需要我打破渐变效果的链条。我一开始只是确保我能正确地分手。到目前为止，我想我已经明白了如何分解它，但我很难获得"a:first"之后的下一个锚对象。我编写了以下代码，适用于第一个和第二个图像以及第一个锚点，但不适用于第二个锚点。
$(document).ready($(
function(){
$('.moonslide img:gt(0)').hide();
$('.moonslidelinks a:first').css("color","#FFF");
$('.moonslide img:first').fadeOut(3000).next('img').fadeIn(3000);
$('.moonslidelinks a:first').animate({color: "#0083ff"}, 3000).next('a').animate({color: "#FFF"}, 3000);
}
));
当它不起作用时，我改变了它，看看我是否能到达下一个锚对象：
$(document).ready($(
function(){
var nextImg = $('.moonslide img:first').next('img');
var nextA = $('.moonslidelinks a:first').next('a');
console.log(nextImg.attr('id'));
console.log(nextA.attr('id'));
}
));
这将第二个图像的ID输出到控制台，这很好，但对于锚点显示为未定义。
[00:02:11.080] "ms1"
[00:02:11.080] undefined
如果我在导航中添加一个列表，并尝试获取下一个"li"ID，它就可以正常工作。
$(document).ready($(
function(){
var nextImg = $('.moonslide img:first').next('img');
var nextA = $('.moonslidelinks li:first').next('li');
console.log(nextImg.attr('id'));
console.log(nextA.attr('id'));
}
));
<ul class="moonslidelinks">
<li id="li0"><a href="#" id="0">Slide 0</a></li>
<li id="li1"><a href="#" id="1">Slide 1</a></li>
<li id="li2"><a href="#" id="2">Slide 2</a></li>
<li id="li3"><a href="#" id="3">Slide 3</a></li>
<li id="li4"><a href="#" id="4">Slide 4</a></li>
</ul>
输出：
[00:07:36.031] "ms1"
[00:07:36.031] "li1"
最后一个问题（再次，很抱歉发了这么长的帖子）：为什么这对主播不起作用，但对李和IMG起作用？"a:first"可以很好地工作，但将".next"链接到它不会。我做错什么了吗？此外，我是在沿着正确的道路创建一个具有导航效果的滑块，还是让自己陷入兔子洞？提前感谢任何帮助我的人，不要一看到我的长文和过度解释就逃跑。
问题在于锚标记之间的"br"标记。最快的解决方案是：
$('.moonslidelinks a:first').animate({color: "#0083ff"}, 3000).next().next().animate({color: "#FFF"}, 3000);
请注意，您需要调用"next（）.next（）"来获得"br"，然后是"a"。
在此处查看所选答案：在jQuery 中获取下一个同级的最干净方法
下一个要锚定的元素是没有id的<br />标记。无论是否向.next()方法传递了参数，它都只返回它旁边的元素。
<div id="linkul" class="moonslidelinks">
<a href="#" id="ml0">Slide 1</a><br />
------------------------------- ------
| |
Selects this first The Next to it.
| |
$('.moonslidelinks a:first').next('a')
-----
|
It will not help
以下是我到目前为止得到的结果。这里的两个答案都是正确的，指定"next（'a'）"不仅仅是为了寻找锚。Ryan Henderson关于使用"next（）.next（）"的建议起到了下一个锚的作用。实际上，我最终还是放弃了在导航端使用"next（）"。正如你在我的原始文章中看到的那样，我通过取出第一个图像并将其附加到div的末尾来旋转图像。这样，代码每次运行时都可以简单地获取div中的第一个图像。我不确定这是否是最好的方法，但正如我所说，我只是在努力学习（这就是我当时想到的）。正因为如此，我不必担心（图片）会排在列表的最后。当我用"next（）.next（）"编写好代码时，我意识到它不起作用，因为我确实要担心导航列表的末尾。在导航端使用"next（）"将使我到达结尾，然后在第一个动画回滚时跳过它。我最终使用了以下方法，这可能是也可能不是最好的解决方案：
JS-
$(document).ready($(
function(){
$('.moonslide img:gt(0)').hide();
$('.moonslidelinks a:first').css("color","#FFF");
setInterval(function(){
var curClass = $('.moonslide img:first').attr('id');
var sp = curClass.split('ms');
var curIndex = parseInt(sp[1]);
var linkID = 'ml' + curIndex;
if (curIndex < $('.moonslide').find('img').length-1) {var nextID = 'ml' + (curIndex+1);}
else {var nextID = 'ml0';}
$('.moonslide img:first').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.moonslide');
$("#"+linkID).animate({color: "#0083ff"}, 3000);
$("#"+nextID).animate({color: "#FFF"}, 3000);
}, 6000);
}
));
我想对这个脚本做的下一件事是放入一些鼠标悬停暂停。我不太确定从哪里开始，但我明天会开始深入研究。我最初的问题得到了上面两个回复的回答，所以我认为这个问题已经解决了（再次感谢你们！）。这是我用于测试的完整HTML页面。这包括所有的CSS、HTML和Javascript。如果你注意到我可以做得更好，我总是乐于接受建议。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:link{color: #0083ff;}
a:active{color:#0083ff;}
a:visited{color:#0083ff;}
a:hover{color:#0083ff;}
.slimage {
width: 650px;
height: 410px;
}
.moonslide {
position:relative;
width: 650px;
height: 410px;
}
.moonslide img{
position:absolute;
z-index: -1000;
}
.moonslidelinks a{
font-size: 1.8em;
text-decoration: none;
}
#viewport {
margin: auto;
width: 1024px;
height: 800px;
position: relative;
background-color: #000;
}
#topslider {
position: relative;
top: 25px;
left: 37px;
height: 420px;
width: 950px;
z-index: 10;
}
#MoonslideNav {
top: 235px;
left: 675px;
width: 150px;
height: 160px;
position: absolute;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Jquery 1.10.2 //-->
<script src="//code.jquery.com/color/jquery.color-2.1.2.js"></script> <!-- Jquery Color Plugin //-->
<script type="text/javascript">
$(document).ready($(
function(){
var fadeTime = 3000; // Time it takes to fade in and out in ms.
var intTime = 6000; // Time before the next image effect starts in ms(counter starts as soon as fade in begins).
$('.moonslide img:gt(0)').hide();
$('.moonslidelinks a:first').css("color","#FFF");
setInterval(function(){
var curID = $('.moonslide img:first').attr('id'); // Get first image (current image) ID
var sp = curID.split('ms'); // Split first part of ID to leave only index number in sp[1]
var curIndex = parseInt(sp[1]); // turn index number string into integer
var linkID = 'ml' + curIndex; // create string for current link ID
if (curIndex < $('.moonslide').find('img').length-1) // Make sure current index is not the last image.
{var nextID = 'ml' + (curIndex+1);} // If it isn't, next index = current index + 1
else {var nextID = 'ml0';} // If it is, next index = first link ID
$('.moonslide img:first').fadeOut(fadeTime).next('img').fadeIn(fadeTime).end().appendTo('.moonslide'); // First Image Fade Out -> Next Image Fade In -> Move first Image to end
$("#"+linkID).animate({color: "#0083ff"}, fadeTime); // Fade current navigation link out
$("#"+nextID).animate({color: "#FFF"}, fadeTime); // Fade next navigation link in
}, intTime); // Repeat after 6 seconds (includes the 3 seconds it takes to fade out / in).
}
));
</script>
</head>
<body>
<div id="viewport">
<div id="topslider">
<div class="moonslide">
<img src="/images/Slider/filer.jpg" class="slimage" id="ms0">
<img src="/images/Slider/greenroom.jpg" class="slimage" id="ms1">
<img src="/images/Slider/ng1.png" class="slimage" id="ms2">
<img src="/images/Slider/ngs.png" class="slimage" id="ms3">
<img src="/images/Slider/worldworks.jpg" class="slimage" id="ms4">
</div>
<div id="MoonslideNav" class="moonslidelinks">
<a href="#" id="ml0">Slide 1</a><br />
<a href="#" id="ml1">Slide 2</a><br />
<a href="#" id="ml2">Slide 3</a><br />
<a href="#" id="ml3">Slide 4</a><br />
<a href="#" id="ml4">Slide 5</a><br />
</div>
</div>
</div>
</body>
</html>
相关文章：
- node.js for循环在函数调用返回之前进行迭代，从而产生对象问题
- Safari 和 IE 中的 JavaScript 日期对象问题
- Knockoutjs 绑定对象问题
- Angular2 奇怪的硬编码对象与 http.get 对象问题
- Javascript 循环 + 对象问题:如何使用循环获取对象中的必需项
- 全局对象问题
- 量角器页面对象问题
- JavaScript对象问题
- 嵌套循环未形成完整对象 - 问题
- ExpressJS PUT方法未定义的对象问题
- 显示对象的对象问题
- React-Router的历史对象问题
- javascript的对象问题
- javascript中的对象问题
- Javascript对象问题
- JavaScript:对象问题
- 谷歌图书API JSON对象问题
- WebMethod返回JSON对象问题
- 对象问题中的 Jquery 对象
- Javascript 对象问题
