使元素拥有自己的变量？

Question

我做了一个列出月份的函数。

function genDate() {
        var d = new Date();

        var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN",
        "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];

        var day = d.getUTCDate().toString();
        var mon = d.getUTCMonth();
        var year = d.getUTCFullYear();

        $("#day").prepend('<span id="day_num">' + day + '</span>');

        var cc = mon;
        for (var i = 0; i < 12; i++) {
            $("#date_cont").append('<div class="month"><a href="" 
                  onclick="return false;" >' + monthNames[cc] + '</a></div>');

            cc++;

            if ( cc > 11 ) {
                cc = 0;
            }
        }
    }

我想做的是让生成的.months元素拥有不同的变量，例如它的月份索引（0-11），可以供其他函数使用。 我猜这些元素将充当对象（.month类的每个元素都有其自己的唯一值）。 我是javascript新手，所以我不知道该如何实现。

Answer 1

当然，只需将其添加到数据属性中，然后再获取？

for (var i = 0; i < 12; i++) {
    var a   = $('<a />', {href: '#', text: monthNames[i] }),
        div = $('<div />', {'class': 'month', 'data-month': i });
                                              // ^^^^^ add a data attribute !
    $("#date_cont").append( div.append(a) );
}

然后您可以执行以下操作：

$('.month').on('click', function(e) {
    e.preventDefault();
    var idx   = $(this).data('month'),
        month = monthNames[idx];

    alert( month );
});

小提琴

Answer 2

由于您使用的是jQuery ...如果您有元素...

var elem = $('<div></div>');
elem.data('day', someValue); //sets 'day' to someValue's value
elem.click(function(e){
  var d = $(this).data('day');
});

注意：您可以在dom元素上分配任何想要的属性（尽量不要冲突）。

var elem = document.getElementById("mine");
elem.somePropertyName = someValue;

同样，data- *属性被认为是将其推入标记的适当方法。

$('#elem').attr('data-day', someValue);
or
<div id="elem" data-day="someValue">...</div>