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

Question

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

<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);
    });
});