Question

上下文：我正在创建鼠标悬停以动态滚动新闻Feed上图像帖子上的图像。（即一页上有多个图像帖子。）

多图像的帖子结构：

.images {
   .leftArrow
   .left
   .center
   .right
   .rightArrow
}

对于单个图像，它具有相同但左右不存在。

我正在创建一个鼠标悬停关闭，它将鼠标悬停在leftArrow上以循环图像。这应该仅在存在“左”图像时才有效。

// Gets first element with given class name
function getChildByClass(el, className) {
var notes = null;
var children = el.children;
for (var i = 0; i < children.length; i++) {
    if ( children[i].classList.contains(className) ) {
      notes = children[i];
      break;
    }        
}
return notes;
}

// mouseover function
function spinLeft() {
var parents = $(".images");
for ( var i = 0; i < parents.length; i++ ) {
    var parent = parents[i];
    var arrow = getChildByClass(parent, "leftArrow");
    var index = getChildByClass(parent, "left");
    if ( index != null ) {
        arrow.addEventListener("mouseover", function() {
            swapImages(this.parent, getChildByClass(this.parent, "left"));
        });
    }
}
}
spinLeft();

/* Post Usage: Spin algorithm for images */
function swapImages(parent, index) { // do swivel }

我的问题是，当我做“鼠标悬停”箭头时，它没有传递给swapImages的正确值。即如何做到这一点，以便我得到正确的箭头父母？另一个实现我给了我最后一个箭头，索引变量通过循环。所以我需要一些使用“this”元素的东西。

对任何建议持开放态度。

Answer 1

假设$(".images")表示jQuery，那么......

在jQuery中做所有事情，以下内容直接等同于问题中的代码（没有function spinLeft(){...}包装器，除非需要多次调用spinLeft()，否则这是不必要的）：

$('.images').each(function(i, parent) {
    if ( $(parent).find('.left').length > 0 ) {
        $(parent).find('.leftArrow').on('mouseover', function() {
            swapImages(parent, $(parent).find('.left').get(0));
        });
    }
});

但是，无条件地将mouseover处理程序附加到.leftArrow元素然后测试处理程序中是否存在兄弟.left元素更简单：

$('.images .leftArrow').on('mouseover', function(event) {
    var $left = $(this).siblings('.left');
    if ( $left.length > 0 ) {
        swapImages($(this).closest('.images').get(0), $left.get(0));
    }
});

如果您准备修改swapImages()以接受jQuery对象而不是原始节点引用，那么：

$('.images .leftArrow').on('mouseover', function(event) {
    var $left = $(this).siblings('.left');
    if ( $left.length > 0 ) {
        swapImages($(this).closest('.images'), $left);
    }
});

如果您准备修改swapImages()以接受jQuery对象并容忍空jQuery对象，那么：

$('.images .leftArrow').on('mouseover', function(event) {
    swapImages($(this).closest('.images'), $(this).siblings('.left'));
});

多个实例上的闭包

1 个答案: