Ad

Add Each Image To Text Area On Click

- 1 answer

I was able to get my answer for the original question here, but I had to change the way I was doing it and now it is not working. So this is what I changed it too:

foreach ($image_data as $key => $row) {
    //print_r($row);
    echo '<div class="item image-link" id="img_link" onClick="myFunction()">
            <img src="'.$row['s3_link'].'" class="img-responsive img-post" />
            <div class="after">                                                                     
                <span class="zoom">
                    <i class="fa fa-check text-success"></i>
                </span>
            </div>
        </div>';    
}   

This is one of many different ways I have tried to do it:

function myFunction() {
            var $this = $('.image-link');
            var myimg = document.getElementsByClassName('img-post')[0];
            var mysrc = '<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><a class="thumbnail" target="_blank" rel="nofollow noreferrer" href="#"><img src="'+myimg.src+'" class="img-responsive" alt="image missing" /></a></div>';
            if($this.hasClass('clickedofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><img src="'+myimg.src+'" class="img-responsive" alt="image missing" /></a></div>';
            if($this.hasClass('clicked')){
                $this.removeAttr('style').removeClass('clicked');             
            } else{
                $this.addClass('clicked');
                $('.selected-images').append(mysrc);
            }
     }

The problem is it will add the class clicked to all images and it will only append the first image.

I should also add the only way the function can work is if I take it out of $(document).ready(function() {});

Can someone tell me what I am doing wrong?

Ad

Answer

jQuery class selector will select all the elements having mentioned class irrespective of the context in which it is invoked.

It is never suggested to use inline function to bind events in JS. You should use .on to bind events.

Using inline-event binding, you must pass this argument as an argument to the function to be called. As jQuery is included, getElementsByClassName can easily replaced by $('.className') but that will not help in this case as you are suppose to .find() the element which is child of the clicked parent.

Also note that you should not have multiple elements having same value for id attribute.

Try this:

function myFunction(elem) {
  var $this = $(elem);
  var myimg = $this.find('img.img-post');
  var mysrc = '<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><a class="thumbnail" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><img src="' + myimg.attr('src') + '" class="img-responsive" alt="image missing" /></a></div>';
  if ($this.hasClass('clicked')) {
    $this.removeAttr('style').removeClass('clicked');
  } else {
    $this.addClass('clicked');
    $('.selected-images').append(mysrc);
  }
}
.clicked {
  background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="item image-link" onClick="myFunction(this)">
  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive img-post" />
  <div class="after">
    <span class="zoom">
                    <i class="fa fa-check text-success"></i>
                </span>
  </div>
</div>

<div class="item image-link" onClick="myFunction(this)">
  <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" class="img-responsive img-post" />
  <div class="after">
    <span class="zoom">
                    <i class="fa fa-check text-success"></i>
                </span>
  </div>
</div>

<div class="item image-link" onClick="myFunction(this)">
  <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" class="img-responsive img-post" />
  <div class="after">
    <span class="zoom">
                    <i class="fa fa-check text-success"></i>
                </span>
  </div>
</div>

Using .on() :

function myFunction() {
  var $this = $(this);
  var myimg = $this.find('img.img-post');
  var mysrc = '<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><a class="thumbnail" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><img src="' + myimg.attr('src') + '" class="img-responsive" alt="image missing" /></a></div>';
  if ($this.hasClass('clicked')) {
    $this.removeAttr('style').removeClass('clicked');
  } else {
    $this.addClass('clicked');
    $('.selected-images').append(mysrc);
  }
}

$('.image-link').on('click', myFunction);
.clicked {
  background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="item image-link">
  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive img-post" />
  <div class="after">
    <span class="zoom">
                    <i class="fa fa-check text-success"></i>
                </span>
  </div>
</div>

<div class="item image-link">
  <img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" class="img-responsive img-post" />
  <div class="after">
    <span class="zoom">
                    <i class="fa fa-check text-success"></i>
                </span>
  </div>
</div>

<div class="item image-link">
  <img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" class="img-responsive img-post" />
  <div class="after">
    <span class="zoom">
                    <i class="fa fa-check text-success"></i>
                </span>
  </div>
</div>

Ad
source: stackoverflow.com
Ad