猫头鹰旋转木马图像不应用CSS

Question

我有一个旋转木马的图像，我想要点击它们，所以我把它们设置成这样：

<div id="comidas" class="owl-carousel owl-theme">
    <a class="item opcion" >
        <img class="img" src = "my/path/to/image.jpg" alt = "Image Name" >
    </a >
    <a class="item opcion" >
        <img class="img" src = "my/path/to/image.jpg" alt = "Image Name" >
    </a >
</div>

我得到了这个剧本：

$(document).ready(function() {

        $("#comidas").owlCarousel({
            items : 10
        });

        $('.opcion').on('click', function(event){
            var $this = $(this);
            if($this.hasClass('clicked')){
                $this.removeAttr('style').removeClass('clicked');
                $this.children('img').removeClass('selected-option');
            } else{
                $this.addClass('clicked');
                $this.children('img').addClass('selected-option');
            }
        });

    });

这是css：

#comidas .item{
    display: block;
    cursor: default;
    margin: 3px;
}
#comidas .item:hover{
    background: rgba(242, 130, 13, 0.27);
}

.selected-option {
    filter: grayscale(1);
}

所以，我想要的是将灰度滤镜应用于a标签内的图像，这是因为我想让用户知道它被选中，但它不起作用！它添加了类img元素，但它不显示任何过滤器。

如果某人有更好的方法，我会全力以赴。