在每個函數中向元素添加數據

Question

我創建了一個計算div內部圖像的每個函數，我試圖將div中計算的圖像數量設置為div的數據屬性，但它不起作用。

我是否以錯誤的方式解決了這個問題，因為它似乎不起作用？

這是網站http://www.touchmarketing.co.nz/test/

    var mostImages = 0;

    numSliders = $wowSlides.length,
    lastVindex = numSliders-1;

    $wowSlides.each(function(){

        var $this = $(this),
        $images = $this.find('img'),
        numImages = $images.length;

        $images.css({width:$slideWidth, 'float':'left', 'position':'relative'}).wrapAll('<div class="slider" />');
        $slider = $this.find(".slider");
        $slider.width($slideWidth*numImages).css({'float':'left'});                     

        $this.data('count', numImages); // add data-count="insert number here" to this .wowSlides div

        console.log(numImages); 

        if(numImages > mostImages){

            mostImages = numImages;

        }                   

    });

Answer 1

這將數據設置為jQuery的專有數據緩存：

$this.data('count', numImages);

它沒有設置為元素的data-屬性。 通常，不需要在客戶端上設置data-屬性，因為其目的是將數據從服務器傳輸到客戶端。

不過，如果你想設置它，請使用

$this.attr('data-count', numImages)

要么

this.setAttribute('data-count', numImages)

---

就個人而言，如果我想將少量數據與元素相關聯，我只需將其作為屬性直接存儲在元素本身上。

this.count = numImages;

對於原始數據，它是無害的。 對於較大的對象或其他DOM元素，我會更猶豫。