单选按钮标签图像选择。我想在选择时添加边框或轮廓

Question

我正在将 OpenCart 用于 T 恤购物网站，我隐藏了单选按钮，并使用了向用户显示的标签图像。作为一个 T 恤网站，我们有不同尺寸的 T 恤，例如 S、M、L XL、XXL、3XL、4XL，并且每种尺寸的图片都很少。我想要发生的是当用户选择尺寸（其中一个单选按钮标签图像）时，我希望图像周围有一个边框或轮廓，以通知用户他们已经选择了该项目。许多 T 恤网站都有类似的功能。

我浏览了网络并尝试了几种不同的方法，但到目前为止都没有。

您能给我举个例子或指出正确的方向吗？有没有办法只用css/html来做到这一点？还是需要 javascript 或 jquery？

另外，请记住这是一个 Opencart 站点，因此按钮、标签和图像中涉及的值是通过 php 导入到文档中的。

这是该页面的链接，因此您可以了解我在说什么。由于 Opencart 正在使用模板文件和 anb 外部 css 样式表，我不确定我应该发布什么代码，所以也许 url 就足够了。 http://rushedtees.com/AAO%20-%20AMERICAN%20BEAGLE

提前感谢您的帮助。

Answer 1

shirts.on('input', function () {
    shirts.removeClass('product-info .option-image img');
    $(this).addClass('border-class');
})

您应该尝试删除上述代码。我认为它从不做任何事情，因为它在 DOM 加载之前被调用。也许您打算将它放在 $(document).ready(function(){}) 内？

---

并在其位置添加以下代码

     $(function () {
        $('.option-image').click(function(ev){
           if(ev.target.tagName !== 'IMG') return;
           $('label', $(this)).removeClass('border-class');
           $(ev.target).closest('label').addClass('border-class');
        })
     });

上面的代码突出显示了选定的<label>。此代码使用this event delegation technique。

更新

要将类添加到<img> 而不是<label>，请使用以下代码

     $(function () {
        $('.option-image').click(function(ev){
           if(ev.target.tagName !== 'IMG') return;
           $('img', $(this)).removeClass('border-class');
           $(ev.target).addClass('border-class');
        })
     });

Answer 2

我建议使用一些 jQuery 来抓取您单击的任何内容并添加一个带边框的独特类。换句话说，当您按下图像时，您会从所有图像中删除该类，然后将一个应用于您刚刚单击的图像：

var shirts = $('.product-info .option-image img');
shirts.on('click', function(){
    shirts.removeClass('border-class');
    $(this).addClass('border-class');
});

记得在你的 CSS 中添加一个类：

<style>
.border-class { border:2px solid red; }
</style>