0

我正在将 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

感谢您提前提供任何帮助。

4

2 回答 2

0

我建议使用一些 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>
于 2013-04-02T06:36:51.643 回答
0 
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>. 此代码使用此事件委托技术。

更新

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

     $(function () {
        $('.option-image').click(function(ev){
           if(ev.target.tagName !== 'IMG') return;
           $('img', $(this)).removeClass('border-class');
           $(ev.target).addClass('border-class');
        })
     });
于 2013-04-02T09:43:01.800 回答