使用 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) {&nbsp; $('.img').toggle();});展开片段如果你想切换所有图像，那么只需：&nbsp;$('img').toggle();

Answer 2

$('.prev_btn, .next_btn').on('click', function(e) {&nbsp; var this$ = $(e.currentTarget), // grab the currently clicked button element&nbsp; &nbsp; parent$ = this$.parents('#pro').first(), // grab the parent of the button that has the id #pro&nbsp; &nbsp; contextBasedImgs$ = parent$.find('img'); // grab all the images in the parent div with id #pro&nbsp; contextBasedImgs$.each(function(ignore, el) {&nbsp; &nbsp; var currEl$ = $(el),&nbsp; &nbsp; &nbsp; newURI = currEl$.attr('onmouseout');&nbsp; &nbsp; currEl$.attr('src', newURI);&nbsp; });});

Answer 3

首先，将您的图像移动到图像本身属性上的数组中data-- 这为您提供了不同的图像集和任意数量的图像 - 而不是仅仅在两个之间切换，您不需要下一个和上一个按钮，所以暗示是你想要两个以上的图像。<img data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg"]' ...接下来，使用 js/jquery 事件处理程序而不是 HTMLonclick=只会让您更好地控制和分离 html/代码等$(".prev_btn").click(function() {在此处理程序中，我们使用您的父包装器找到相关图像。在这里我给了包装器 aclass而不是 anid这样你就可以拥有多个包装器而不需要不同的 ID 并且更容易在 css 中设置样式（而不是.closest("div")）$(this).closest(".wrapper").find("img").first()并且点击事件处理程序调用带有方向的通用方法（而不是重复所有相同的代码）这在每个图像上存储当前索引，因此不需要额外的变量来“记住”img.data("index", new_index);然后是从图像中读取数组，根据方向更改索引并更新图像的情况。我不得不对按钮的 CSS 进行一些调整（仅用于演示），第二张图片包含第三张图片网址，以显示它不仅可以切换$(".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>