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

这是您的问题：var $this = $('.image-link');。它选择所有具有＆＃34; image-link＆＃34;。

类的元素

这也是不必要的，因为函数被传递了被点击的项目;可以使用this来引用它。你需要做的就是摆脱变量声明，并替换＆＃34; $ this＆＃34;用＆＃34; $（this）＆＃34;

编辑：此外，我在这里并不积极，但我打赌它在$(document).ready(function() {});内无法工作的原因是因为你正在使用内联＆＃34; onclick＆＃34;属性。如果你使用事件监听器（例如$('.image-link').on(...），它应该是无关紧要的。

Answer 2

jQuery类选择器将选择所有提到类的元素，而不管它被调用的上下文。

永远不建议使用内联函数来绑定JS中的事件。您应该使用.on绑定事件。

使用内联事件绑定，您必须将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>

点击

2 个答案: