Click to copy each attribute href of a tag into image source

Question

My image link sources in for loop

  foreach (images as image) { 

 echo ?> <a id="image" onclick="return false;" href=" my image link"  >
          <span > <?php  echo  $image->imageName; ?></span> <?
    }

Output for image link something like Link1 Link2 Link3

HTML to show image

<img id="copyimage" src="" alt="No Pic" style="width:304px;height:228px;">

My Jquery

(document).ready(function(){
    $("#image").click(function(){

  var link = $(this).attr('href');

    $("#copyimage").attr("src", link);

});
});

when I click to each link (Link1 Link2 Link3) ,I want to copy each of them into image source to show image. But it just only worked for first link (Link1) and Link2 Link2 didn't.

It's because they all have the same id and jQuery will only return the first match when using an id selector. — Nope, Jul 19 '17 at 15:25

score 0 · Answer 1 · answered Jul 19 '17 at 15:26

0

all the link have the some ID id="image" you need to use class :

foreach (images as image) { 

 echo ?> <a class="image" onclick="return false;" href=" my image link"  >
          <span > <?php  echo  $image->imageName; ?></span> <?
    }

Jquery

(document).ready(function(){
        $(".image").click(function(){

      var link = $(this).attr('href');

        $("#copyimage").attr("src", link);

    });

answered Jul 19 '17 at 15:26

Mustapha Larhrouch

3,373
3
14
28

Alternatively use a data-attribute `data-id` for code purpose in case the CSS guys remove the class if they don't need it. – Nope Jul 19 '17 at 15:28
It worked ! Thanks a lot :D – jenii Jul 19 '17 at 15:29

Click to copy each attribute href of a tag into image source

1 Answers1