Question

我写了一个简短的脚本，通过点击缩略图来交换大图像。这应该适用于每个项目本身，但通过单击拇指，所有大图像都在交换。

这就是我多次：

<div class="item_page_itemlist" style="">
<div class="item">          
    <span class="number"></span>
    <div class="pos">
        <div class="inner">
            <div id="listWrapper" class="clistWrapper clistWrapper[ID]"></div>
            <style>
                .clistWrapper[ID] {
                    background: url('/images/products/img1234.png');
                    background-size: cover;
                    -moz-background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
                    width: 100%;
                    height: 100%;
                }
            </style>
        </div><!-- inner -->
        <div class="rightinner">
            <h2>Title</h2>
            <div class="propslist">
                <p class="pone"><span>Measures: </span>0 x 0 x 0cm</p>
                <p class="ptwo"><span>Material: </span>Wood</p>
                <p class="pthree"><span>Weight: </span>65kg</p>
            </div>
            <div class="listThumbCon">
                <div id="listThumb" class="listThumbs listThumbs[ID]">
                    <a href="javascript:void(0);"><img src="/images/produkte/cache/mi11/11.jpg"></a>
                    <a href="javascript:void(0);"><img src="/images/produkte/cache/mi12/12.jpg"></a>
                    <a href="javascript:void(0);"><img src="/images/produkte/cache/mi13/13.jpg"></a>
                </div>
            </div>
        </div>
    </div>
</div><!--item-->

jQuery：

$(".listThumbs img").click(function(){
    //console.log($(this).attr("src"));
    var newImg = $(this).attr("src");
    $(".clistWrapper", this).css("background-image","url('"+newImg+"')");
});

无法使用生成的[ID]。我的意思是，通过使用每个项目的[ID]是可能的，但我不希望每个项目都有脚本。

Answer 1

如果你想使用这个ID，你不必为每个ID重写脚本，你可以使用jQuery＆＃34; Starts with＆＃34;选择; http://api.jquery.com/attribute-starts-with-selector/

例如;

$('div[id^="listThumb"]')........

那将适用于：

<div id="listThumb1">....</div>
<div id="listThumb2">....</div>
<div id="listThumb3">....</div>
<div id="listThumb4">....</div>
<div id="listThumb5">....</div>

等

用于多个类的图像交换的jQuery短脚本

1 个答案: