如何更改圖像並鏈接到Javascript中的數據值？

我開始學習Javascript，我需要你的幫助。我有大圖像，大圖下有3個縮略圖。如果用戶單擊第二個縮略圖，則大圖必須更改爲第二個數據bigimage。並且swipebox鏈接必須更改爲第二個數據原始圖像。其他圖像也是如此。如何更改圖像並鏈接到Javascript中的數據值？

HTML：

<div class="profile-gallery"> 
<div class="profile-gallery_top js-bigImg"> 
    <a href="img/bigImg1.jpg" class="swipebox"> 
     <img class="profile-bigImage" src="img/bigImg.jpg" alt=""/> 
    </a> 
</div> 
<ul class="profile-thumbs"> 
    <li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li> 
    <li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li> 
    <li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li> 
</ul>

來源

2015-05-29 Elgiz I

謝謝你們解決方案的工作！但在swipebox圖庫中有一個圖像，我如何將所有圖像插入swipebox數組？ –

jQuery(document).ready(function($) { 

    $('.profile-thumbs li').click(function(){ 
     var imageurl = $(this).children('img').data('bigimage'); 
     var imageorig = $(this).children('img').data('original'); 

     $('.profile-bigImage').attr("src", imageurl); 
     $('.swipebox').attr("href", imageorig); 
    }); 
});

$（這）總是在與選擇器匹配的點擊功能中點擊元素。

來源

2015-05-29 12:56:57

謝謝你的好解決方案！但在swipebox有一個單一的圖像，我怎麼能插入所有圖像swipebox陣列？ –

因此，您需要將每三個圖像放入掃描包裝盒？ –

這可能做的東西，試試這個：

$(".profile-thumbs li img").click(function() { 
    var bigImg = $(this).data("bigimage"), 
     original = $(this).data("original"); 
    $(".swipebox").attr("href", original); 
    $(".profile-bigImage").attr("src", bigImg); 
});

來源

2015-05-29 12:52:47

看看下面的例子使用jQuery。

`$(this)` will refer the image clicked.

所以$(this).attr('src')將是我們點擊圖片的來源。它分配給其爲具有classprofile-bigImage

$('img').click(function(){ 
 
var imgsrc=$(this).attr('src'); 
 
    $('.profile-bigImage').attr('src',imgsrc); 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="profile-gallery"> 
 
<div class="profile-gallery_top js-bigImg"> 
 
    <a href="img/bigImg1.jpg" class="swipebox"> 
 
     <img class="profile-bigImage" src="img/bigImg.jpg" alt=""/> 
 
    </a> 
 
</div> 
 
<ul class="profile-thumbs"> 
 
    <li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li> 
 
    <li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li> 
 
    <li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li> 
 
</ul>

來源

2015-05-29 12:53:30 Jayababu

你可以嘗試這樣的事情的形象，它應該工作

$(document).on('click','.profile-thumbs img', function(event) { 

    event.preventDefault(); 
    $('.profile-gallery-top a').attr('href', $(this).data('original')); 
    $('.profile-gallery-top img').attr('src', $(this).data('bigimage')); 
});

來源

2015-05-29 12:55:39 Lyncee

如何更改圖像並鏈接到Javascript中的數據值？

回答

相關問題