基于多个图像追加色板

Question

我有一个页面的产品，其中一些有多个图像。我想添加一个swatch(仅当多个图像存在时)，它将切换swatch相关的图像。我正在考虑为每个图像添加一个标题，这将是一个类别，该样本将是。

例如一个产品有3张图片。第一张是黑色的，第二张是蓝色的，第三张是粉红色的。每个swatch将从图像的标题名称中获得它的类名。另外，每个图像也将切换相应的图像。

HTML

<li class="prod">
<div class="mainpic">
<img src="image" title="black" />
<img src="image" title="blue" /> 
<img src="image" title="pink" /> 
</div>
<h1>Nike Shirt</h1>
</li>
<li class="prod">
<div class="mainpic">
<img src="image" title="black" />
</div>
<h1>Nike Shirt</h1>
</li>
<li class="prod">
<div class="mainpic">
<img src="image" title="yellow" />
<img src="image" title="green" />
</div>
<h1>Nike Shirt</h1>
</li>

SWATCH HTML(如果检测到超过1个图像，将自动追加)

<ul class='swatch'>
<li class='black'></li>
<li class='blue'></li>
<li class='pink'></li>
<ul> 

SCRIPT(不完整)

var totalImg = $('.mainpic').find('img').length;
if ( totalImg > 1 ) { 
$('.prod .mainpic').append('<ul class="swatches"></ul>');
}

最终HTML

<li class="prod">
<div class="mainpic">
<ul class='swatch'>
<li class='black'></li>
<li class='blue'></li>
<li class='pink'></li>
<ul> 
<img src="image" title="black" />
<img src="image" title="blue" /> 
<img src="image" title="pink" /> 
</div>
<h1>Nike Shirt</h1>
</li>
<li class="prod">
<div class="mainpic"> 
<img src="image" title="black" />
</div>
<h1>Nike Pants</h1>
</li>
<li class="prod">
<div class="mainpic"> 
<ul class='swatch'>
<li class='yellow'></li>
<li class='green'></li>
<ul> 
<img src="image" title="yellow" />
<img src="image" title="green" />
</div>
<h1>Nike Hat</h1>
</li>

提前感谢!

Answer 1

这会生成指定的HTML:

$('li.prod div.mainpic').each ( function () {
    var jThis           = $(this);
    var mainImages      = jThis.find ('img');
    if ( mainImages.length > 1 ) {
        jThis.prepend ('<ul class="swatches"></ul>');
        var targList    =  jThis.find ('ul.swatches');
        mainImages.each ( function () {
            newClass    =  $(this).attr ('title');
            targList.append ("<li class='" + newClass + "'></li>");
        } );
    }
} );

在jsFiddle中查看它的作用。请注意，CSS只是为了更清楚地显示正在发生的事情。

结果:

<li class="prod">
<div class="mainpic">
<ul class="swatches">
<li class="black"></li>
<li class="blue"></li>
<li class="pink"></li>
</ul>
<img src="image" title="black" />
<img src="image" title="blue" /> 
<img src="image" title="pink" /> 
</div>
<h1>Nike Shirt</h1>
</li>
<li class="prod">
<div class="mainpic">
<img src="image" title="black" />
</div>
<h1>Nike Pants</h1>
</li>
<li class="prod">
<div class="mainpic">
<ul class="swatches">
<li class="yellow"></li>
<li class="green"></li>
</ul>
<img src="image" title="yellow" />
<img src="image" title="green" />
</div>
<h1>Nike Hat</h1>
</li>

Answer 2

1)获取所有。mainpic元素
2)过滤包含多于1张图片的元素。
3)为步骤#2的每个。mainpic元素添加一个保持UL元素
4)遍历步骤#2的每个。mainpic元素中的每个img元素
5)用li换行，并附加到前面创建的ul元素

试试这个:

<script type="text/javascript">
    $(document).ready(function() {
            $(function() {
                var tgtLis = $(".mainpic").filter(function(){ //Get all the mainpic elements
                    return $(this).children("img").length > 1; //return only if they have  more than 1 image.
                }).each(function(a, b){
                    var $this = $(b);
                    var ul = $this.append("<ul>");  //append a holding UL element for each mainpic
                    $("img", $this).each(function(a, b){ //iterate through each img element
                        ul.append($("<li/>").append(b)); //wrap it with li and append to the ul element created earlier
                    });
                });
            });
    });
</script> 

工作示例@:http://jsfiddle.net/Rgz4R/