javascript - replace image src onclick jQuery

I'm trying to create simple product page

HTML:

<div class="product-image">
    <div class="product-large-image">
        <img src=".jpg" alt="Product Title" id="large-image"></div>
    <div class="product-small-image">
        <img src=".jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src=".jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src=".jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src=".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%;
}

I need to replace the src attribute of the large image with the src attribute of the clicked image.

JS (jquery):

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

It's working well only on first image
I need it to work when any of the small images is clicked, not just the first.

This is live example of my code:
/

I'm trying to create simple product page

HTML:

<div class="product-image">
    <div class="product-large-image">
        <img src="http://demo4coder./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./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./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./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./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%;
}

I need to replace the src attribute of the large image with the src attribute of the clicked image.

JS (jquery):

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

It's working well only on first image
I need it to work when any of the small images is clicked, not just the first.

This is live example of my code:
https://jsfiddle/MohamedMehanny/dsahrLvn/2/

Share Improve this question edited May 11, 2017 at 18:30 Sᴀᴍ Onᴇᴌᴀ 8,2938 gold badges37 silver badges60 bronze badges asked May 11, 2017 at 18:20 Mohamed Mehanny 3071 gold badge6 silver badges20 bronze badges

1 Your Fiddle gives a 404. – VDWWD Commented May 11, 2017 at 18:21
jsfiddle/MohamedMehanny/dsahrLvn ... its autally this .. – RïshïKêsh Kümar Commented May 11, 2017 at 18:22
2 Well ids are singular so you can not have more than one element with an id... – epascarello Commented May 11, 2017 at 18:23
1 change id to use class – tech2017 Commented May 11, 2017 at 18:23
If you change it to a class, you should be able to use something like this $('.product-image').on('click', '.small-image', function(){ //your code here. }) – Jean B Commented May 11, 2017 at 18:29

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

it's working well only on first image i need it to working in any clicked image not the first only

Use classes instead of ID's

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

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

The id attribute must be unique:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).¹

One alternative approach is to use a class attribute instead of id for each of the small images.

For example, image tags like this:

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

Would use a class attribute instead of id:

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

Then use the css class selector to select the images in order to set up the click handler:

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

See it demonstrated below:

$('.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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-image">
  <div class="product-large-image"><img src="http://demo4coder./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./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./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./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./item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div>
</div>

¹_{https://developer.mozilla/en-US/docs/Web/HTML/Global_attributes/id}

The issue lies with your selectors. You are using IDs which means that only one should ever exist on a single page.

For best practices, use a JS prefixed class to maintain separation of concerns for this. An example in your case would .js-small-img or .js-lg-img

Let me know if you still have any issues!

$('.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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-image">
  <div class="product-large-image"><img src="http://demo4coder./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./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./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./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./item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - replace image src onclick jQuery - Stack Overflow

HTML:

CSS:

JS (jquery):

HTML:

CSS:

JS (jquery):

4 Answers 4

与本文相关的文章

评论列表(0)