以單個div更新內容，所有div名稱相同

Question

當所有div名稱相同時，似乎只會嘗試更新所選div中的圖像。

<div class="collapse">img img img img img</div> 
<div class="collapse">img img img img img img img</div> 
<div class="collapse">img img img </div> 
<div class="collapse">img img img img img img</div> 

我有在data-src標記內設置圖像的數據，並且當div展開時，它會加載圖像。但是，由於div具有相同的類名，因此在加載展開後的div中的圖像時，會加載所有摺疊div中的所有圖像。

$(function() { 
     $('.collapse img').attr('src', function(index, src) { 
     return this.getAttribute('data-src'); 
     }); 
    }); 

這是我的展開代碼裏面的代碼，它如何改變爲只加載當前選定的div中的圖像？

編輯 - 展開代碼：

$.fn.toggler = function(options) { 
    var o = $.extend({}, $.fn.toggler.defaults, options); 

    var $this = $(this); 
    $this.wrapInner('<a style="display:block; color: #fff; text-decoration: none;" href="#" title="Expand/Collapse" />'); 
    if (o.initShow) {$(o.initShow).addClass('shown');} 
    $this.next(o.cllpsEl + ':not(.shown)').hide(); 
    return this.each(function() { 
     var container; 
     (o.container) ? container = o.container : container = 'html'; 
     if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); } 
     $(this).click(function() { 



     $(function() { 
      $('.collapse img').attr('src', function(index, src) { 
      return this.getAttribute('data-src'); 
      }); 
     }); 



     $(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed); 
     return false; 
    }); 
});}; 

編輯2 - 如何在div得到擴大。對不起，這個網站還很新。應該有更多的信息。

這是在頁面頂部的JavaScript：

<script type="text/javascript"> 
    $(function() { 
     $("span.expand").toggler({method: "toggle", speed: 0}); 
    }); 
    </script> 

是被點擊擴大的div跨度：

<span class="expand">&nbsp;</span> 

跨度是建立在CSS來顯示圖像作爲背景。

編輯：找到解決方案。

我放在：

$(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed); 

上方的顯示圖像的代碼，以便它會觸發它首先試圖加載圖像之前打開，並改變了負荷的形象代碼：

$(function() { 
     $this.closest(container).find('.collapse:visible img').attr('src', function(index, src) { 
     return this.getAttribute('data-src'); 
     }); 
    }); 

謝謝大家：P

Answer 1

這是假設您正在處理您的擴展通過單擊問題的div

$(".collapse").click(function() { 
    // code that handles expanding 
    // .... 

    $(this).children("img").attr('src', function(index, src) { 
     return this.getAttribute('data-src'); 
    }); 
}); 

Answer 2

您正在使用$()附加事件處理程序，它是「當文檔準備就緒」的縮寫，然後說「對每個.collapse img執行此操作」。沒有任何暗示任何被「選擇」的東西。現在，假設「選定」您的意思是「點擊」。在這種情況下，你會想要做的事，如：

$(function() { 
    $('.collapse').click(function() { 
    $(this).children('img').attr('src', function(index, src) { 
    return this.getAttribute('data-src'); 
    }); 
    }); 
}); 

現在，每次被點擊div.collapse運行的代碼來設置圖像的src。

（我猜這仍是不太你的意思，但它可能是更接近）

Answer 3

$.fn.toggler = function(options) { 
    var o = $.extend({}, $.fn.toggler.defaults, options); 

    var $this = $(this); 
    $this.wrapInner('<a style="display:block; color: #fff; text-decoration: none;" href="#" title="Expand/Collapse" />'); 
    if (o.initShow) {$(o.initShow).addClass('shown');} 
    $this.next(o.cllpsEl + ':not(.shown)').hide(); 
    return this.each(function() { 
     var container; 
     (o.container) ? container = o.container : container = 'html'; 
     if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); } 
     $(this).click(function() { 


      //right here `this` refers to the same this from above: `$(this).click(...` 
      $.each($(this).find('img'), function() { 

       //right here `this` refers to the current image, since we are looping over all the images 
       $(this).attr('src', $(this).attr('data-src')); 
      }); 


     $(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed); 
     return false; 
    }); 
});}; 

我假設this是.collapse元素之一，在這種情況下，我們發現在圖像在單擊的.collapse元素內，並且僅更改它的src屬性。

請注意，您不需要代碼中的$(function() {})（document.ready事件處理程序）。它應該用來像這樣初始化插件。

Answer 4

展開時，您可以在擴展代碼中使用$(this)關鍵字並獲取當前展開的節點。

$(this).find('img').attr('src', function() { return $(this).data('src'); });