Jquery 苹果iPhone5c网站式颜色组合选择器

我在网上浏览，找到一个jQuery插件，它可以给我一个产品颜色选择器，类似于的网页。我认为这是我找到的最接近jQuery的插件。但这不是我要找的，因为我一直都有产品不同颜色组合的图像，我希望它的工作方式类似于iPhone5c的网页。我希望你们能帮助我，谢谢。

我已经使用了苹果页面的图像，并且自己创建了CSS。CSS需要改进，但我只是做了一个简单的例子

HTML 第一个鼠标悬停在“活动”链接上

---

如果要单击“选定”图像，可以使用以下代码：

---

iPhone图片示例 您必须添加以下CSS：

#green, #blue, #yellow{
    display: none;
}

。。和下面的JavaScript

$(document).ready(function(){
    var oldButton = null;
    $('ul li a').on('click', function(){
        if (oldButton){
            $(oldButton).removeClass('selected');
            if ($(this).attr('class') !== $(oldButton).attr('class')){ // added
                $('#' + $(oldButton).attr('class')).toggle('slow');
            } // end added
        }
        if ($(this).attr('class') !== $(oldButton).attr('class')){ // added
            $('#' + $(this).attr('class')).toggle('slow');
        } // end added
        oldButton = this;
        $(this).addClass('selected');
    });
});

还有一些额外的HTML：

<img id="green" src="https://www.apple.com/iphone-5c/home/images/color_green_none.jpg#gallery-cases-green-none" />
<img id="blue" src="https://www.apple.com/iphone-5c/home/images/color_blue_none.jpg#gallery-cases-blue-none" />
<img id="yellow" src="https://www.apple.com/iphone-5c/home/images/color_yellow_none.jpg#gallery-cases-yellow-none" />

JavaScript

$(document).ready(function(){
    var oldButton = null;
    var oldCase = null;
    var phoneColor = "green";
    var phoneCase = "none";
    $('#phone li a').on('click', function(){
        if (oldButton){
            $(oldButton).removeClass('selected');
        }
        phoneColor = $(this).attr('class').replace(" selected", "");
        setSrc();
        oldButton = this;
        $(this).addClass('selected');
    });

    $('#case li a').on('click', function(){
        if (oldCase){
            $(oldCase).removeClass('selected');
        }
        phoneCase = $(this).attr('class').replace(" selected", "");
        setSrc();
        oldCase = this;
        $(this).addClass('selected');
    });

    var setSrc = function(){
         $('#img').attr("src", "https://www.apple.com/iphone-5c/home/images/color_"+phoneColor+"_"+phoneCase+".jpg#gallery-cases-"+phoneColor+"-"+phoneCase);
    };
});

小提琴

---

谢谢@guyT我很感激，这真的很有帮助，但我现在的问题是颜色组合。在iPhone5c网站上有两个选项，手机颜色和手机壳颜色，您可以使用这两个选择器选择不同的颜色组合。如果我听起来很傻，我很抱歉，但是有没有办法在你的代码中添加这些功能，先生？@markyeoj查看我的最新答案。提示使用“@”和一个名字，否则我不会收到通知。谢谢@guy这正是我要找的，你救了我一天，先生。谢谢

$(document).ready(function(){
    var oldButton = null;
    $('ul li a').on('click', function(){
        if (oldButton){
            $(oldButton).removeClass('selected');
            if ($(this).attr('class') !== $(oldButton).attr('class')){ // added
                $('#' + $(oldButton).attr('class')).toggle('slow');
            } // end added
        }
        if ($(this).attr('class') !== $(oldButton).attr('class')){ // added
            $('#' + $(this).attr('class')).toggle('slow');
        } // end added
        oldButton = this;
        $(this).addClass('selected');
    });
});

<img id="green" src="https://www.apple.com/iphone-5c/home/images/color_green_none.jpg#gallery-cases-green-none" />
<img id="blue" src="https://www.apple.com/iphone-5c/home/images/color_blue_none.jpg#gallery-cases-blue-none" />
<img id="yellow" src="https://www.apple.com/iphone-5c/home/images/color_yellow_none.jpg#gallery-cases-yellow-none" />

<ul id="phone">
    <li><a class="green"></a></li>
     <li><a class="blue"></a></li>
     <li><a class="yellow"></a></li>
</ul>
<ul id="case">
    <li><a class="green"></a></li>
     <li><a class="blue"></a></li>
     <li><a class="yellow"></a></li>
</ul>

<img id="img" src="" />

$(document).ready(function(){
    var oldButton = null;
    var oldCase = null;
    var phoneColor = "green";
    var phoneCase = "none";
    $('#phone li a').on('click', function(){
        if (oldButton){
            $(oldButton).removeClass('selected');
        }
        phoneColor = $(this).attr('class').replace(" selected", "");
        setSrc();
        oldButton = this;
        $(this).addClass('selected');
    });

    $('#case li a').on('click', function(){
        if (oldCase){
            $(oldCase).removeClass('selected');
        }
        phoneCase = $(this).attr('class').replace(" selected", "");
        setSrc();
        oldCase = this;
        $(this).addClass('selected');
    });

    var setSrc = function(){
         $('#img').attr("src", "https://www.apple.com/iphone-5c/home/images/color_"+phoneColor+"_"+phoneCase+".jpg#gallery-cases-"+phoneColor+"-"+phoneCase);
    };
});