Проверьте, содержит ли массив определенную строку, затем выберите этот элемент

Ладно, это может звучать очень расплывчато, но я постараюсь объяснить как можно лучше.

У меня есть изображение, и я собрал его источник с .attr('src') функция. Это изображение является одним из 5 других изображений, все в том же Div. Пока я собрал две вещи:

  1. VAR SRC, который содержит URL-адрес изображения, которое я нажал.
  2. массив var, массив, который содержит все изображения в div.

Вот структура HTML:

<div class="images">
 <img src="path1" />
 <img src="path2" />
 <img src="path3" />
 <img src="path4" />
 <img src="path5" />
</div>

Представь, я нажал третье изображение. Переменная 'src' будет содержать значение 'path3'. Я хочу, чтобы при нажатии на иконку со стрелкой в ​​нижней части моей страницы значение переключалось на "path2", предыдущий элемент в массиве.

Как мне это сделать?

Источник

4 ответа

Решение

Предполагая ваши переменные src а также array:

var index = array.findIndex(function(img) {
    return img.src === src
})

var elementYouWant = array[index - 1]

Вы можете добавить проверку, если index ноль, потому что в этом случае index - 1 было бы -1 а также elementYouWant будет undefined, То же самое для array.length

Источник 
var imageArray; //Ur images array;
var index=imageArray.indexOf(src);
if(index>0) {
  src=imageArray[index-1]; 
}
Источник

Предполагая, что все ваши изображения находятся в одном родителе <div> элемент, вы можете использовать JQuery's .prev() чтобы получить доступ к непосредственному предыдущему брату указанного элемента:

function getPrevSrc (currentSrc) {
    // Get DOM element with the given src attribute
    // could be optimized by providing a parent element
    var $currentImg = $("[src='" + currentSrc + "']");

    // Get previous sibling
    // Note that using this on the first image is an edge case,
    // so you have to handle it accordingly to your needs
    var $prevImg = $currentImg.prev();

    // Return previous src
    return $prevImg.attr("src");
}
Источник

Вы должны попробовать ниже код:

$('img').click(function() {
        alert($(this).attr('src'));
    alert($(this).prev('img').attr('data-value'));
});

Вы можете проверить здесь: https://jsfiddle.net/xeq4yn0z/

Источник
Другие вопросы по тегам