Question

好的，这可能听起来很模糊，但我会尽力解释。

我有一张图片，我用.attr('src')函数收集了它的来源。此图像是其他5个图像中的一个，全部在同一个div中。到目前为止，我收集了两件事：

var src，其中包含我点击的图片的网址。
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'。我想，当我点击页面底部的箭头图标时，该值将切换到'path2'，即数组中的上一项。

我该怎么做？

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>元素中，您可以使用jQuery＆＃39; .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");
}

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/

检查数组是否包含某个字符串，然后选择该项

4 个答案: