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

Question

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

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

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

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

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

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

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

Answer 1

Предполагая, что переменные 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

Answer 2

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

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

Answer 3

var imageArray; //Ur images array; 
var index=imageArray.indexOf(src); 
if(index>0) { 
    src=imageArray[index-1]; 
} 

Answer 4

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

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

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