Question

我想在我的Magento商店中通过单选按钮更改产品图像单击而不使用任何扩展名。

我只想在单选按钮上将其颜色更改为棕褐色和黑白进入相同的图像容器。（http://demo.lifestylewallart.com.au/）

因为我的magento中会有很多图像，所以代码应该是最小的。

我在简单文件上使用html和css进行了尝试。

请看一下，让我知道如何在magento商店更好地使用它。

 img {
     display: block;
     width: 50%;
 }
 .sepia {
     -webkit-filter: sepia(1);
     filter: sepia(1);
 }
 .gray {
     -webkit-filter: grayscale(1);
     filter: grayscale(1);
 }

<html>
    
    <body>Original : -
        <img src="http://i.stack.imgur.com/CE5lz.png">
        <br>
        <div class="sepia">Sepia : -
            <img src="http://i.stack.imgur.com/CE5lz.png">
        </div>
        <div class="gray">Gray :-
            <img src="http://i.stack.imgur.com/CE5lz.png">
        </div>
    </body>

</html>

期待快速支持...谢谢

Answer 1

修改1

.removeClass('sepia gray')使用了。

为div识别目的添加了一个新类imageDiv。

$('input[name="color"]').on('change', function () {
    $('div.imageDiv')
        .removeClass('sepia gray')
        .addClass($(this).val());
});

 img {
     display: block;
     width: 50%;
 }
 .sepia {
     -webkit-filter: sepia(1);
     filter: sepia(1);
 }
 .gray {
     -webkit-filter: grayscale(1);
     filter: grayscale(1);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input name="color" type="radio" value="gray" checked />Gray<br/>
<input name="color" type="radio" value="sepia"/>Sepia
<div class="imageDiv gray">
    <img src="http://i.stack.imgur.com/CE5lz.png" />
</div>

注意：如果您有办法唯一地选择div，则无需添加额外的类，如果有很多可能的不同颜色，请尝试使用开关案例。

在单选按钮上更改产品图像

1 个答案: