使用 JQuery 在单击"下一步"和"上一页"时切换图像 src

Question

我正试图在点击时切换图像src，而不是鼠标悬停&在里面我有多个图像，我想切换单个产品的图像，如果存在于图像的同一父div中的按钮会被点击。有什么想法吗？

function toggleImage(thisimage) {
thisimage.toggle();
}

.prev_btn {
position: absolute;
left: 7px;
top: 30px;
bottom: 0;
width: 30px;
height: 128%;
z-index: 2;
border-style: dotted;
}
.next_btn {
position: absolute;
right: 65%;
top: 30px;
bottom: 0;
width: 30px;
height: 128%;
z-index: 2;
border-style: dotted;
}

<div id="pro"><img width="206" height="260" src="https://www.w3schools.com/html/pic_trulli.jpg" onmouseover="this.src='https://www.w3schools.com/html/img_chania.jpg'" onmouseout="this.src='https://www.w3schools.com/html/pic_trulli.jpg'">
<div class="prev_btn" onclick="toggle(this)"></div>
<div class="next_btn" onclick="toggle(this)"></div>
</div>

Answer 1

使用jQuery可以这样做。

请给你的图像元素上课。否则，您也可以切换所有图像标记。

$('.prev_btn, .next_btn').on('click', function(e) {
$('.img').toggle();
});

如果你想切换所有图像，那么只需：

$('img').toggle();

Answer 2

首先，将图像移动到图像本身的data-属性上的一个数组中-这会为您提供不同的图像集和任意数量的图像-而不仅仅是在两个图像之间切换，您不需要下一个和前一个按钮，因此这意味着您需要两个以上的图像。

<img data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg"]' ...

接下来，使用js/jquery事件处理程序而不是HTMLonclick=只会让你对HTML/代码等进行更多的控制和分离(更多信息请参阅其他SO问题(

$(".prev_btn").click(function() {

在这个处理程序中，我们使用父包装器找到相关的图像。在这里，我给包装器一个class而不是id，这样您就可以拥有多个包装器，而不需要不同的ID，并且更容易在css(而不是.closest("div")(中进行样式设置

$(this).closest(".wrapper").find("img").first()

点击事件处理程序调用一个带有方向的通用方法(而不是重复所有相同的代码(

这在每个图像上存储当前索引，因此不需要额外的变量来"确定"当前索引；记住"；

img.data("index", new_index);

然后是从图像中读取数组，根据方向更改索引并更新图像的情况。

我不得不对你的CSS按钮进行一些调整(只是为了演示(，第二张图片包括第三张图片的url，以显示它的工作原理不仅仅是切换

$(".prev_btn").click(function() {
changeImage($(this).closest(".wrapper").find("img").first(), -1)
});
$(".next_btn").click(function() {
changeImage($(this).closest(".wrapper").find("img").first(), 1)
});
function changeImage(img, direction)
{
var images = img.data("images");
var idx = img.data("index");

idx += direction;
if (idx >= images.length) idx = 0;
if (idx < 0) idx = images.length - 1;

img
.data("index", idx)
.attr("src", images[idx]);
}

.wrapper {
position:relative;
}
.prev_btn, .next_btn {
position:absolute;
left: 0;
top: 0px;
bottom: 0;
width: 30px;
height: 255px;
z-index: 2;
border-style: dotted;
}
.next_btn {
left: 170px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img width="206" height="260" 
src="https://www.w3schools.com/html/pic_trulli.jpg" 
data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg"]'
data-index="1">
<div class="prev_btn"></div>
<div class="next_btn"></div>
</div>
<div class="wrapper">
<img width="206" height="260" 
src="https://www.w3schools.com/html/img_chania.jpg" 
data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg", "https://www.w3schools.com/html/img_girl.jpg"]'
data-index="0">
<div class="prev_btn"></div>
<div class="next_btn"></div>
</div>

Answer 3

$('.prev_btn, .next_btn').on('click', function(e) {
var this$ = $(e.currentTarget), // grab the currently clicked button element
parent$ = this$.parents('#pro').first(), // grab the parent of the button that has the id #pro
contextBasedImgs$ = parent$.find('img'); // grab all the images in the parent div with id #pro

contextBasedImgs$.each(function(ignore, el) {
var currEl$ = $(el),
newURI = currEl$.attr('onmouseout');
currEl$.attr('src', newURI);
});
});