更改单选按钮上的产品图片答案

【问题标题】：Change Product Image on radio button更改单选按钮上的产品图片
【发布时间】：2015-08-06 05:04:48
【问题描述】：

我想在不使用任何扩展程序的情况下通过单选按钮单击更改我的 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>

期待大家的快速支持..谢谢

【问题讨论】：

标签： javascript jquery html css magento

【解决方案1】：

编辑 1

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

添加了一个新类 imageDiv 用于 div 识别。

$('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，则无需添加额外的类，如果有很多可能的不同颜色，请尝试使用开关盒。

【讨论】：

我可以在 Magneto Store 中实现这个吗？我正在开发 Neoshop 主题。我以前从未做过主题定制。你能告诉我应该用这个代码更新哪个文件..
如果只有两个类你也可以使用toogleClass()，
@RahulDambare 对不起，我之前没有在 Magento 上工作过。
您好先生，我们如何使用多个类..？
@RahulDambare .removeClass('sepia gray') 您可以先删除所有颜色类，方法是在 removeClass 中使用空格（如 removeClass('sepia gray black green etc')）分隔它们，然后在 addClass($(this).val()) 之后添加新的颜色类。

【解决方案2】：

使用此代码。会有帮助的

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

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

<input type="radio" checked="checked" value="original" name="color" />Color<br /> <input type="radio" value="gray" name="color" />Gray<br /> <input type="radio" value="sepia" name="color" />Sepia</p>
<div class="imageDiv original">
<img id="photo" class="north" alt="" src="Tulips.jpg" /></div>

【讨论】：