Question

我开始学习Javascript，我需要你的帮助。我有大图像，在大图像下有3个缩略图。如果用户单击第二个缩略图，则大图像必须更改为第二个data-bigimage。并且swipebox链接必须更改为第二个数据原始图像。其他图像也一样。

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>

Answer 1

这可能会做的事情，试试这个：

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

Answer 2

使用jQuery查看下面的示例。

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

所以$(this).attr('src')将成为我们点击的图片的来源。将其分配给具有class profile-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>

Answer 3

你可以尝试类似的东西，它应该可以工作

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

Answer 4

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);
    });
});

$（this）始终是与选择器匹配的单击函数中的单击元素。

如何在Javascript中更改图像并使用数据值进行链接？

4 个答案: