替换图片src onclick jQuery

Question

我正在尝试创建简单的产品页面

HTML：

<div class="product-image">
    <div class="product-large-image">
        <img src="http://demo4coder.com/gosmart/pub/media/catalog/product/cache/image/600x600/e9c3970ab036de70892d86c6d221abfe/v/e/venus100_shoes3.jpg" alt="Product Title" id="large-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" id="small-image"></div>
</div>

CSS：

.product-large-image {
    width: 100%;
    border: 2px solid #ffac00;
    text-align: center;
    display: inline-block;
    margin-bottom: 5px;
}
.product-large-image img {
    width: 90%;
}
.product-small-image {
    width: 19.38%;
    border: 2px solid #ffac00;
    margin-bottom: 5px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
.product-small-image img{
    width: 90%;
}

我需要用单击的图像的src属性替换大图像的src属性。

JS（jquery）：

$('#small-image').click(function(){
    var imgsrc=$(this).attr('src');
    $('#large-image').attr('src',imgsrc);
});

仅在第一个图像上运行良好
单击任何小图像，而不仅仅是第一个，我都需要它工作。

这是我的代码的实时示例：
https://jsfiddle.net/MohamedMehanny/dsahrLvn/2/

Answer 1

它仅在第一个图像上工作良好，我需要它可以在任何单击的图像中工作，而不仅仅是第一个

使用类而不是ID

<img src="#" class="small-image" />

$('.small-image').click(function(){
  var imgsrc=$(this).attr('src');
  $('#large-image').attr('src',imgsrc);
});

Answer 2

id属性必须是唯一的 ：

id 全局属性定义一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。 其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。 ^1个

一种替代方法是为每个小图像使用class属性而不是id 。

例如，图像标签如下：

<img id="small-image" src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title">

将使用class属性而不是id ：

<img class="small-image" src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title">

然后使用css类选择器选择图像以设置点击处理程序：

$('.small-image').click(function(){...});

看到下面的演示：

 $('.small-image').click(function() { var imgsrc = $(this).attr('src'); $('#large-image').attr('src', imgsrc); }); 

 .product-large-image { width: 100%; border: 2px solid #ffac00; text-align: center; display: inline-block; margin-bottom: 5px; } .product-large-image img { width: 90%; } .product-small-image { width: 19.38%; border: 2px solid #ffac00; margin-bottom: 5px; display: inline-block; text-align: center; cursor: pointer; } .product-small-image img { width: 90%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-image"> <div class="product-large-image"><img src="http://demo4coder.com/gosmart/pub/media/catalog/product/cache/image/600x600/e9c3970ab036de70892d86c6d221abfe/v/e/venus100_shoes3.jpg" alt="Product Title" id="large-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div> </div> 

---

¹ _{https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/id}

Answer 3

问题出在您的选择器上。 您正在使用ID，这意味着在一个页面上应该只存在一个。

为了获得最佳实践，请使用JS前缀类来对此保持关注。 您的示例是.js-small-img或.js-lg-img

让我知道您是否还有任何问题！

Answer 4

 $('.small-image').click(function() { var imgsrc = $(this).attr('src'); $('#large-image').attr('src', imgsrc); }); 

 .product-large-image { width: 100%; border: 2px solid #ffac00; text-align: center; display: inline-block; margin-bottom: 5px; } .product-large-image img { width: 90%; } .product-small-image { width: 19.38%; border: 2px solid #ffac00; margin-bottom: 5px; display: inline-block; text-align: center; cursor: pointer; } .product-small-image img { width: 90%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-image"> <div class="product-large-image"><img src="http://demo4coder.com/gosmart/pub/media/catalog/product/cache/image/600x600/e9c3970ab036de70892d86c6d221abfe/v/e/venus100_shoes3.jpg" alt="Product Title" id="large-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div> <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div> </div>