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

我建议使用一些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>

Answer 2

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

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

2 个答案: