使用 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

$('.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);

  });

});

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>