Question

我还在学习JS，并且正在寻找构建网格/缩略图轮播并找到这段代码。它的行为非常奇怪，因为它连续显示3个相同的图像（例如图像1在图像2显示3次之前出现3次等）。我试图了解每一行中发生了什么，并希望有人可以帮助我分解每一行中发生的事情？

以下是代码：

$('.carousel[data-type="multi"] .item').each(function(){ 
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<1;i++) {
        // next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

以下是我认为在每一行中发生的事情：

创建适用于轮播中每个项目的功能
将下一个声明为变量（我昨天读到了这个，但它仍然不清楚它的作用 - 只适用于每个可更改的对象？）
检查下一个元素是否存在以及是否存在
然后选择第一个选择器的兄弟姐妹？
将下一个孩子声明为第一个孩子之后的任何东西并将其添加到变量/对象中？
for循环，如果符合条件
不太清楚这条线是什么意思
如果下一个长度存在
然后next将等于第一个选择器的兄弟姐妹（为什么在for循环中提到它时会在for循环中重复？）
不太确定为什么会再次重演？

非常感谢任何帮助！谢谢！

Answer 1

这里是：

$('.carousel[data-type="multi"] .item')

找到类carousel和data-type =“multi”的所有项目，例如然后在 .carousel

中找到所有包含item 类的项目
.each(function(){

遍历其中的每个项目，this =每个项目

var next = $(this).next();

找到.item之后的元素 - 不知道这可能是什么，因为你没有包含html

if (!next.length) { next = $(this).siblings(':first'); }

如果this是最后一个兄弟，那么得到第一个兄弟，即在开头再次开始

如果轮播只有一个项目，那么现在这将在上面的循环中指向.item（this）。

next.children(':first-child').clone().appendTo($(this));

找到下一个孩子，复制它（克隆）并将其添加为当前.item的孩子

for (var i=0;i<1;i++) {

设置i = 0，但不执行任何操作（循环i从0到0），我没有使用，这没有做任何事情

// next=next.next();

转到上一个next=
之后的下一个项目
if (!next.length) { next = $(this).siblings(':first'); }

和以前一样检查，这没有任何意义，因为下一个将被设置为第一个兄弟，所以什么都不做 - 如果你保持在next=next.next();循环回到开头那将是有意义的

next.children(':first-child').clone().appendTo($(this));

重复上一个克隆

这就是为什么你得到3张图片 - 有（可能没有html证据）只有一个.item和两行代码可以将它复制到自身。

这个Javascript代码中发生了什么（逐行细分）？

1 个答案: