Question

我试图在点击时切换图像src，而不是鼠标移入和移入。我有多张图片，我想切换单个产品的图片，如果在图片的同一父分区中存在的按钮将单击。有什么想法吗？

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事件处理程序而不是HTML onclick=可以为您提供更多控制和html / code等的分离（有关更多信息，请参阅其他SO问题）

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

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

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

和click事件处理程序按方向调用一个通用方法（而不是重复所有相同的代码）

这会在每个图像上存储当前索引，因此不需要其他变量来“记住”

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>

单击下一个和上一个使用JQuery切换图像src

3 个答案: