javascript - 单击时将每个图像添加到文本区域

Question

我能够得到原始问题的答案 here ，但我不得不改变我做这件事的方式，现在它不起作用了。所以这也是我改变的:

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>';    
}   

这是我尝试过的许多不同方法之一:

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" 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);
            }
     }

问题是它会将 clicked 类添加到所有图像，并且只会附加第一张图像。

我还应该添加函数可以工作的唯一方法是将它从 $(document).ready(function() {});

中取出

谁能告诉我我做错了什么？

Answer 1

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

不建议在JS中使用内联函数来绑定(bind)事件。您应该使用 .on 来绑定(bind)事件。

使用内联事件绑定(bind)，您必须将 this 参数作为参数传递给要调用的函数。由于包含 jQuery，getElementsByClassName 可以很容易地替换为 $('.className') 但在这种情况下这无济于事，因为您假设 .find( ) 被点击父元素的子元素。

另请注意，您不应该让多个元素的 id 属性具有相同的值。

试试这个:

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" 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>

使用 .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" 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>