Закрытие на нескольких экземплярах

Question

Контекст: Я создаю кнопки для динамического прокрутки изображений на сообщении изображения в ленте новостей. (то есть на одной странице несколько сообщений с изображениями).

Сообщение структура для мульти-изображения:

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

Для одного изображения он имеет то же самое, но левый и правый нет.

Я создаю крышку для мыши, которая помещает курсор мыши влево, чтобы циклически перемещать изображения. Это должно работать только при наличии «левого» изображения.

// 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 } 

Моя проблема заключается в том, что когда я на «MouseOver» стрелка, он не имеет правильное значение, приходящее к swapImages. например, как я могу сделать это, чтобы получить правильный родитель стрелки? Другая реализация, которую я дал мне, - последняя стрелка, индексные переменные, прошедшие цикл. Поэтому мне нужно что-то, что использует «этот» элемент.

Открыт для любых предложений.

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')); 
});