我正在使用jQuery构建产品配置页面，当用户选择相应的颜色选项时，我需要能够更改产品的颜色，在本例中为鞋子。每只鞋子有四个可由用户指定的组成部分。例如。鞋面颜色，鞋底颜色和蕾丝颜色以及拼接颜色。
我有各种颜色选项的鞋子照片，可以使用标准化的文件命名约定来调用它们，例如：
黑 - 黑 - 黑black.jpg
和
红 - 黑 - 黑 - black.jpg
黑 - 红 - 红 - red.jpg
等
我需要产品照片才能记住以前的选择，所以如果访客选择红色鞋面，那么如果他们选择蓝色鞋底则重新编号。 所以最初我们称之为全黑鞋（black-black-black-black.jpg），然后我们改变那个图像（red-black-black-black.jpg），选择红色鞋面然后再选择（红色 - 红色 - black-black.jpg）当选择红色鞋底时。
我的jQuery缩放脚本（cloudzoom）使用图像属性来分配小尺寸和大图像尺寸。 所以我需要用每个用户选择用相关文件名替换这一行，并使该选择变粘，直到下一个选项选择。
我已经看了好几天了，如果可能的话，我会非常感谢一些帮助。谢谢。
我的代码如下，这里有一个有效的演示 - http://www.stepto.co.uk/view/product/
jQuery(document).ready(function() {
jQuery('.options ul li a').each(myFunction);
jQuery('.options ul li a').click(function(){
jQuery('.options ul li a').each(myFunction2)
});
});
function myFunction2() {
var embel = jQuery(this).parent().attr("class").split(' ').pop();
jQuery(this).each(function(){
var target = jQuery(this).parent().parent().attr("class");
if(target == "optionset1"){
var base = jQuery(this).parent().attr("class").split(' ').pop();
}
if(target == "optionset3"){
var sole = jQuery(this).parent().attr("class").split(' ').pop();
}
if(target == "optionset4"){
var heel = jQuery(this).parent().attr("class").split(' ').pop();
}
var myattributes2 = "useZoom: '#zoom1', image: 'images/small/" + base + "-" + embel + "-" + sole + "-" + heel + ".jpg', zoomImage: 'images/large/" + base + "-" + embel + "-" + sole + "-" + heel + ".jpg'";
jQuery(this).attr({"class": "cloudzoom-gallery", "href": "#", "data-cloudzoom" : myattributes2});
});
}
function myFunction() {
jQuery(this).each(function(){
var base = "black";
var embel = "black";
var sole = "black";
var heel = "black";
var target = jQuery(this).parent().parent().attr("class");
if(target == "optionset1"){
var base = jQuery(this).parent().attr("class").split(' ').pop();
}
if(target == "optionset2"){
var embel = jQuery(this).parent().attr("class").split(' ').pop();
}
if(target == "optionset3"){
var sole = jQuery(this).parent().attr("class").split(' ').pop();
}
if(target == "optionset4"){
var heel = jQuery(this).parent().attr("class").split(' ').pop();
}
var myattributes2 = "useZoom: '#zoom1', image: 'images/small/" + base + "-" + embel + "-" + sole + "-" + heel + ".jpg', zoomImage: 'images/large/" + base + "-" + embel + "-" + sole + "-" + heel + ".jpg'";
jQuery(this).attr({"class": "cloudzoom-gallery", "href": "#", "data-cloudzoom" : myattributes2});
});
}
<div class="contents" style="width:70%; float:left;">
<div class="theshoe">
<img class="cloudzoom" src="images/small/black-black-black-black.jpg" id="zoom1" data-cloudzoom="zoomImage: 'images/large/black-black-black-black.jpg', zoomSizeMode: 'zoom', zoomOffsetX: 0, zoomOffsetY: 0, zoomFlyOut: false, zoomPosition:'inside'" />
</div>
</div>
<div class="theoptions" style="width:30%; float:left;">
<div class="options">
<h2>Upper Colour</h2>
<ul class="optionset1">
<li class="suedeblack black"><a href="#" class="cloudzoom-gallery">black <img src="images/blank.png"></a></li>
<li class="suedepurple red"><a href="#" class="cloudzoom-gallery">red <img src="images/blank.png"></a></li>
</ul>
<h2>Laces</h2>
<ul class="optionset2">
<li class="studblack black"><a href="#" class="cloudzoom-gallery">black laces <img src="images/blank.png"></a></li>
<li class="studgrey grey"><a href="#" class="cloudzoom-gallery">white laces<img src="images/blank.png"></a></li>
</ul>
<h2>Sole</h2>
<ul class="optionset3">
<li class="soleblack black"><a href="#" class="cloudzoom-gallery">black sole <img src="images/blank.png"></a></li>
<li class="solegrey white"><a href="#" class="cloudzoom-gallery">white sole <img src="images/blank.png"></a></li>
</ul>
<h2>Stitching</h2>
<ul class="optionset4">
<li class="heelblack black"><a href="#" class="cloudzoom-gallery">black stitch <img src="images/blank.png"></a></li>
<li class="heelgrey white"><a href="#" class="cloudzoom-gallery">white stitch <img src="images/blank.png"></a></li>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我认为解决这个问题的部分问题是模式的混乱结构（我的意思是，通过更好的组织代码，您会发现问题对您来说更清楚）。但是，无论这是否真实，以下是我将如何做的基础。
// First a function that will set the image according to the required specs
var myFunction=function(args){
var defaults={
base:'black',
sole:'black',
stitch:'black',
laces:'black',
imgPath:'images/large/',
img:function(){
return this.base + '-' + this.sole + '-' + this.stitch + '-' + this.laces + '.jpg'}
}
var options=$.extend({},defaults,args);
//The above creates a new options object without overwriting the defaults
$('#zoom1').attr('src',options.img());
// I will explain this next line in a moment
if(typeof $('#contents').data('base')==="undefined"){
$('#contents').data({
base:options.base,
sole:options.sole,
stitch:options.stitch,
laces:options.laces
})
}
有几种方法可以完成下一件作品。为简单起见，我将把数据分配给#contents元素。 您可以将此数据分配给任何适合您目的的元素。分配此数据的关键在于，有一个集中选项组合的中心位置，以便每个点击事件都可以引用。您还可以将其存储在全局变量或LocalStorage中。为此，我们将在页面加载时将默认值分配给#contents - ＆gt;这就是myFunction的最后一行功能。如果未设置数据，则设置它。 然后页面加载事件如下：
$(document).bind('load',myFunction});
使用每个$（'li a'），我们为它们提供数据组件和数据颜色的数据属性。数据组件将引用它们引用的组件类型，即底座，鞋底等，然后颜色将指代您希望设置它的颜色。
然后为每个链接：
$('.option li a').on('click',function(e){
var component=$(this).data('component'),
color=$(this).data('color');
// This next line sets the contents data-component referenced to the right color,
// for example: red laces
$('#contents').data(component,color);
var base=$('#contents').data('base'),
sole=$('#contents').data('sole'),
stitch=$('#contents').data('stitch'),
laces=$('#contents').data('laces');
return myFunction({"base":base,"stitch":stitch,"laces":laces});
})
即使这个例子比它需要的更复杂，但它展示了利用DOM数据的功能。由于您已经使用了更多代码，并且与您尝试执行的操作有更深层次的关系，因此您可能希望修改代码以满足您的需求。你可以称之为伪模板。如果有什么不清楚，请告诉我。