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＆＃39;

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

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

Answer 2

id 属性必须唯一：

id global attribute定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时识别元素。¹

另一种方法是为每个小图像使用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">

将使用类属性而不是 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 class selector选择图像以设置点击处理程序：

$('.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/en-US/docs/Web/HTML/Global_attributes/id

Answer 3

问题在于你的选择者。您正在使用ID，这意味着单个页面上只应存在一个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>

替换图像src onclick jQuery

HTML：

CSS：

JS（jquery）：

4 个答案: