jQuery用於與多個類交換圖像的短腳本

我通過單擊縮略圖編寫了一個用於交換大圖像的簡短腳本。這應該適用於每個項目本身，但通過單擊一個拇指，所有大圖像都會交換。jQuery用於與多個類交換圖像的短腳本

這是我有多次：

<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]爲每個項目，但我不希望爲每個項目的腳本。

來源

2013-07-10 Sebastian Rush

如果你想使用ID，你不必爲每個ID重寫腳本，你可以使用jQuery「Starts with」選擇器; 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>

等

來源

2013-07-10 08:38:10

我不想使用一個ID或類.listThumb [ID]。如果可能的話，我想保持它的共同點。 –

解決： '// bildSwap貝清單當然 \t \t $（」。listThumbs IMG 「）點擊（函數（）{ \t \t \t //console.log($(this).attr("src」））。 ; \t \t \t VAR newImg = $（本）.attr（「SRC」）; \t \t \t $（本）.closest（」項目「）找到（」 clistWrapper 「）的CSS（」背景 - 圖片「，」url（'「+ newImg +」'）「）; \t \t}）;' –

對不起，我誤解了你在問我什麼時候看到關於ID的問題！ :) 是的，.closest方法將是最好的選擇，它將遍歷DOM並找到最近的.clistWrapper到被點擊的圖像！ –

jQuery用於與多個類交換圖像的短腳本

回答

相關問題