Question

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

<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

你很亲密！首先，您可以使用*代替所有attribute selector的查询选择器。

之后，您只需拨打each即可（而不是attr）。

这是一个更新的小提琴：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);
    });
});

Answer 2

demo

您可以转到$("[data-shadow]")选择器（由Jack建议）并直接访问元素的.css()回调（因为$()）已经是元素的集合：

$('[data-shadow]').css("text-shadow", function() {
    var t=$(this).data().shadow, sh="", long=90;        
    for(var n=1; n<=long; n++) sh += n+"px "+n+"px "+t+(n<long?" ,":""); 
    return sh;
});

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

2 个答案: