Question

这是jquery中极端noob的第一篇文章，无论多么微不足道，都会寻求任何帮助。

我有3张照片，我试图淡化哪些效果很好（从youtube上学习）带有标签，但是当我把链接嵌入下面的div中时，我变得完全迷失了，尤其是.next和.parent（）下面的jquery中使用的语法。

HTML

<div id="container">

<div id="slider">       
<a href ="#"><img Class="is-showing" src="includes/templates/Custom/images/navbox2.gif"/> </a>
</div>
<div>
  <a href = "#"> <img  src="includes/templates/Custom/images/image1.gif" width = "100%" /> </a>
</div>
<div>
  <a href = "#"> <img  src="includes/templates/Custom/images/navbox.gif" /> </a>
</div>

</div>

JQUERY

function slideShow() {

  var showing = $('#slider .is-showing');
  var count = showing.parent().parent();

 var next = count.next().length ? showing.parent().parent().next().children(':second') : closest('#Slider').children(':second');


  showing.fadeOut(800, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');

  setTimeout(slideShow, 5000);
}

更多问题这行代码“var count = showing.parent().parent();”是否指向div #slider，就像我认为的那样，或者是无效的？

“showing.parent().parent().next().children(':second')”，我担心这段代码可能太长甚至没有意义（虽然对我有用，但是新手知道的是什么）。

Answer 1

您编写的代码中有一些语法错误。

does this line of code "var count = showing.parent().parent();" 
point to the div #slider

是的，它指向滑块div。

更好.. showing.closest('div');

我认为这没有任何意义

showing.parent().parent().next().children(':second');

根据上面的HTML，这会使next div 中的 第二个孩子 。

closest('#Slider').children(':second');也没有任何意义..

完整代码 ..经过一些假设后

function slideShow() {

    var showing = $('#slider .is-showing');
    var count = showing.closest('div');

    var next = count.next('div').length 
                ? showing.closest('div').next('div').children(':first') 
                :  count.find('img');


    showing.fadeOut(800, function() {
        next.fadeIn(800).addClass('is-showing');
    }).removeClass('is-showing');

    setTimeout(slideShow, 5000);
}

<强>更新

你说下一个div不存在，

我的意思是说.children(':second');没有任何意义（不是div的下一个）因为每个div只有一个子元素，即锚元素。 .children（）将获得直接的孩子而不是嵌套的孩子..

首先拍摄一个类“正在显示”，然后他使用.next（）来获取下一个img元素

这对于上面的HTML不起作用，因为下一个将获得直接的兄弟，当你在图像上执行.next（）时，没有任何东西，因为没有图像的兄弟姐妹。

为什么我们在淡入淡出中添加和删除类（is-showing）功能

因为淡入淡出函数是异步的。所以你需要在回调中这样做。否则会立即反映出来。

我已经成功获得了一个只使用<img/>标签的图片推子，但无法使用<a> tags</a>

1 个答案: