Question

我试图在点击时为某些图像设置特定的css类。

这是我的代码：

<%= image_tag ('snapchat.png'), class: "img-rounded", id: "icon-hover", width: "50px" %>
<%= image_tag ('tinder.png'), class: "img-rounded", id: "icon-hover", width: "50px" %>
<%= image_tag ('tumblr.png'), class: "img-rounded", id: "icon-hover", width: "50px" %>

我的jquery：

$(document).on('click', '.img-rounded', function (){
      $('.img-rounded').css({
        '-webkit-filter':'grayscale(0%)',
        'filter':'grayscale(0%)',
      });
    });

该功能效果很好，问题是当我点击一个图像时，它会将css归因于所有其他图像。我怎么能一次只定位一个元素？

感谢您的帮助。

编辑：我的图像包含在父元素中，如下所示：

<b href="" class="wechat" id="icon-hover" style="text-decoration:none">
  <%= image_tag ('wechat.png'), class: "img-rounded", id: "icon-hover", width: "50px" %>
</b>

所以即使使用＆＃34;这个＆＃34;处理程序，它没有回应：

$(document).on('click', '.img-rounded', function (){
      $(this).css({
        '-webkit-filter':'grayscale(0%)',
        'filter':'grayscale(0%)',
      });
    });

Answer 1

$(this).css({
    '-webkit-filter':'grayscale(0%)',
    'filter':'grayscale(0%)',
});

表示您将当前对象分配给名为$ this的变量。它不是关键字。

Answer 2

$(document).on('click', '.img-rounded', function (){
      $(this).css({
        '-webkit-filter':'grayscale(0%)',
        'filter':'grayscale(0%)',
      });
    });

Jquery：只选择一个类onclick - 不是全部

2 个答案: