javascript - 如何在 jQuery 中使用数据属性？

Question

我正在尝试通过使用 jQuery 为任何具有数据阴影属性的元素添加 css 样式来添加长阴影。阴影颜色将是元素的值。所以这是我的尝试:

<div data-shadow="#A00909">Test</div>

div{
    background:red;
    display:inner-block;
    font-size:44px;
    text-align:center;
    font-weight:bold;
    color:#fff;
    padding:40px;    
    overflow:hidden;
    width:50%;
    margin:auto;
}

// jQuery
$(function() {

    $( "*" ).attr( "data-shadow", function( i, value ) {
        var t = $(this).data('shadow');
        var n, sh = "",long = 90;        
        for( n = 1 ; n <= long ; n++ ){
            sh = sh + n + "px "+n+"px "+ value; 
            if( n != long ) sh = sh +", ";
        }

        $(this).css("text-shadow",sh);

    });

});

在 jQuery 代码中，我试图获取 data-shadow 的值，但没有成功。
否则，当我使用如下代码中的指定值时 - 它有效:

$( "*" ).attr( "data-shadow", function( i, value ) {
    var temp = "#A00909";
    var t = $(this).data('shadow');
    var n, sh = "",long = 90;        
    for( n = 1 ; n <= long ; n++ ){
        sh = sh + n + "px "+n+"px "+ temp; 
        if( n != long ) sh = sh +", ";
    }

    $(this).css("text-shadow",sh);

    });
});

http://jsfiddle.net/b0fpkccf/

如何使用 data-shadow 的值代替每个具有 data-shadow 属性的元素的临时值？

Answer 1

你很接近!首先，您可以使用属性选择器，而不是对所有* 执行查询选择器。

之后，您只需调用each(而不是attr)。

这是一个更新的 fiddle :http://jsfiddle.net/jpattishalljr/b0fpkccf/4/

$(function() {
    $('[data-shadow]').each(function(i, value) {
        var t = $(this).data('shadow');
        var n, sh = "",long = 90;        
        for( n = 1 ; n <= long ; n++ ){
            sh = sh + n + "px "+n+"px "+ t; 
            if( n != long ) sh = sh +", ";
        }

        $(this).css("text-shadow",sh);
    });
});