多個實例上的閉包

上下文：我正在創建鼠標懸停來動態滾動新聞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。即如何做到這一點，以便我得到正確的箭頭父母？另一個實現給了我最後一個箭頭，通過循環的索引變量。所以我需要一些使用「這個」元素的東西。

歡迎任何建議。

來源

2014-02-19 collinglass

我建議你檢查出['。孩子（）']（http://api.jquery.com/children/），這將讓你找到的第一個孩子與一個特定的類不需要另一個功能。 – Pointy

@Pointy這給了我一個錯誤：'未捕獲的類型錯誤：對象＃的屬性'children'不是函數' – collinglass

這是一個** jQuery **函數：'$（this）.children（'。left' ）.eq（0）'從「this'引用的DOM節點開始，從類」left「獲取第一個子元素 – Pointy

假設$(".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')); 
});

來源

2014-02-22 00:39:42

多個實例上的閉包

回答

相關問題