jQuery使用每个函数分配粘性属性

我正在使用jQuery构建一个产品配置页面，当用户选择相应的颜色选项时，我需要能够更改产品的颜色，在本例中是鞋子的颜色。每只鞋有四个部件，可由用户指定。鞋面颜色、鞋底颜色、蕾丝颜色和缝线颜色。 我有各种颜色选项的鞋子照片，可以使用标准化的文件命名约定来调用它们，例如：
black-black-black-black.jpg 及 red-black-black-black.jpg 黑-红-红-红.jpg 等

我需要产品照片来记住之前的选择，因此如果访问者选择红色鞋面，那么如果他们选择蓝色鞋底，这将被记住。 因此，最初我们称之为全黑鞋（black.jpg），然后在选择红色鞋面时更改该图像（red-black.jpg），然后在选择红色鞋底时再次更改该图像（red-red-black.jpg）

我的jQuery zoom脚本（cloudzoom）使用图像属性来分配大小图像。 因此，我需要用每个用户选择的相关文件名替换这一行，并使该选择具有粘性，直到下一个选项选择为止。

我已经看了好几天了，如果可能的话，我真的非常感谢你的帮助。多谢各位

下面是我的代码，这里有一个工作演示-

jQuery（文档）.ready（函数（）{
jQuery（'.options ul li a'）。每个（myFunction）；
jQuery（'.options ul li a'）。单击（函数（）{
jQuery（'.options ul li a'）。每个（myFunction2）
});
});
函数myFunction2（）{
var embel=jQuery（this.parent（）.attr（“class”）.split（“”）.pop（）；
jQuery（this）.each（function（）{
var target=jQuery（this.parent（）.parent（）.attr（“类”）；
如果（目标==“选项集1”）{
var base=jQuery（this.parent（）.attr（“class”）.split（“”）.pop（）；
}
如果（目标==“选项集3”）{
var sole=jQuery（this.parent（）.attr（“class”）.split（“”）.pop（）；
}
如果（目标==“选项集4”）{
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}）；
});
}
函数myFunction（）{
jQuery（this）.each（function（）{
var base=“黑色”；
var embel=“黑色”；
var sole=“黑色”；
var heel=“黑色”；
var target=jQuery（this.parent（）.parent（）.attr（“类”）；
如果（目标==“选项集1”）{
var base=jQuery（this.parent（）.attr（“class”）.split（“”）.pop（）；
}
如果（目标==“选项集2”）{
var embel=jQuery（this.parent（）.attr（“class”）.split（“”）.pop（）；
}
如果（目标==“选项集3”）{
var sole=jQuery（this.parent（）.attr（“class”）.split（“”）.pop（）；
}
如果（目标==“选项集4”）{
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}）；
});
}
上色




鞋带




鞋底




缝合

我认为自己解决问题的一部分是模式的混乱结构（我的意思是，有了更好的组织代码，您会发现问题对您来说更清楚）。但是，不管这是真是假，以下是我将如何做的基本知识

 // 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元素。 您可以将此数据分配给适合您的目的的任何元素。分配此数据的目的是为了有一个中心位置来组合选项，以便每个单击事件都可以引用。您还可以将其存储在全局变量或本地存储中。为此，我们将为页面加载->上的#内容指定默认值，这是函数myFunction的最后一行所做的。如果未设置数据，则设置它。 然后页面加载上的事件如下所示：

$(document).bind('load',myFunction});

对于每个$（'LIA'），我们给它们一个数据组件和数据颜色的数据属性。数据组件将指的是它们所引用的组件类型，即基本、鞋底等，然后颜色将指的是您希望设置的颜色

然后针对每个链接：

$('.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数据的功能。随着您对代码的使用越来越多，并且与您正在尝试的工作有着更深的关系，您可能希望修改代码以满足您的需要。您可以将其称为伪模板。如果有任何不清楚的地方，请告诉我。

您是否考虑过使用$.fn.data。我不会试图举出一个例子，但是

$('.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});
    })