在每个函数中向元素添加数据

时间:2013-02-20 22:56:04

标签: javascript jquery html5

我创建了一个计算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;

        }                   

    });

1 个答案:

答案 0 :(得分:16)

这将数据设置为jQuery的专有数据缓存:

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

它未设置为元素的data-属性。通常,不需要在客户端上设置data-属性,因为其目的是将数据从服务器传输到客户端。

然而,如果你想设置它,请使用

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

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

就个人而言,如果我想将少量数据与元素相关联,我只需将其作为属性直接存储在元素本身上。

this.count = numImages;

对于原始数据,它是无害的。对于较大的对象或其他DOM元素,我会更犹豫。