如何更改图像并链接到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中的数据值？

回答

相关问题