使用 JQuery 在單擊下一個和上一個時切換圖像 src

Question

我試圖在單擊時切換圖像src而不是 mouseout & in。我有多個圖像，我想切換單個產品的圖像，如果按鈕存在於圖像的同一父 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 事件處理程序而不是 HTML onclick=只是給你更多的控制和分離 html/code 等（有關更多信息，請參閱其他 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>