Question

我有一个产品页面，其中一些产品有多个图像。我想附加一个样本（仅当存在多个图像时）才会切换样本所涉及的图像。我在想为每个图像添加一个标题，这个标题将是一个swatch所在的类。

例如，产品有3张图片。第1张图片是黑色，第2张是蓝色，第3张是粉红色。每个样本都将从图像的标题名称中获取其类名。此外，每个图像也会切换相应的图像。

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>");
        } );
    }
} );

See it in action at 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/

根据多个图像附加色板

2 个答案: