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

Question

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

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

我的 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>

Answer 1

我认为自己解决问题的部分问题是模式的混乱结构（我的意思是，如果代码组织得更好，你会发现问题对你来说更清楚了）。但是，无论这是否属实，以下是我将如何做到这一点的基础知识。

 // 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 -> 这就是函数 myFunction 的最后一行所做的。如果未设置数据，则设置它。 然后页面加载事件如下：

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

对于每个 $('li a')，我们给它们一个 data-component 和 data-color 的数据属性。 data-component 将引用它们所引用的组件类型，即 base、sole 等，然后 color 将引用您希望设置的颜色。

然后对于每个链接：

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