.each 组成属性

Question

好的，我已经尝试了大约 5 次不同的修订，我很确定我的代码越来越差，所以我想我应该停下来寻求帮助。

这是我正在尝试做的事情：

在 HTML 中，假设我创建了这个按钮：

<button border="#ff0000" bg="#0000ff" color="#fff" pad="10px">Click Me</button>

如你所见，我编造了几个属性，并分别给它们赋值。

我想使用 jquery 到 select 每个按钮，并且对于每个按钮，循环遍历每个属性并获取值并添加具有该值的真实属性。

例如，它会看到 border="#ff0000" 并创建一个 border-color: #ff0000: CSS 属性并将其附加到该按钮。它会看到 bg="#0000ff" 属性并将背景颜色：#0000ff: 附加到该按钮。

这是我的垃圾：

$(document).ready(function() {
    $("button").each(function() {  // selects all buttons
        $(this.attr).each(function() {  // selects all attributes within each button
            var attribute = this.parent().attr();  // sets a variable that is equal to the value of the selected made up attribute
            if ($(this).parent().attr("border")) {  // if there is an attribute called border, do this
                $(this).parent().css("border-color", attribute) // give this attribute's parent (the button) this css attribute
            } else if ($(this).attr("bg")) { // rinse and repeat for each attribute I made up
                $(this).parent().css("background-color", attribute)
            } else if ($(this).attr("color")) {
                $(this).parent().css("color", attribute)
            }
        });
    });
});

如果我说的不对，请告诉我=]

更新

下面的代码有效，但我不禁觉得有一种 easier/shorter 的编码方式，因为如您所见，我重复了很多相同的代码。

$(document).ready(function() {

    $("button").each(function() {
        var bg = $(this).attr("bg");
        var border = $(this).attr("border");
        var color = $(this).attr("color");
        var radius = $(this).attr("radius");
        var pad = $(this).attr("pad");

        if($(this).attr("bg")) {
            $(this).css("background", bg)
        }

        if($(this).attr("border")) {
            $(this).css("border-color", border)
        }

        if($(this).attr("color")) {
            $(this).css("color", color)
        }

        if($(this).attr("radius")) {
            $(this).css("border-radius", radius)
        }

        if($(this).attr("pad")) {
            $(this).css("padding", pad)
        }
    });

});

Answer 1

很高兴看到您找到了可行的解决方案。关于优化您的答案，您可以采用几种方法。我在下面分享了一个，您可能会发现它有用，其中有一些评论总结了正在发生的事情。

$(document).ready(function() {
    $("button").each(function() {
        // Cache jQuery selectors for each button in an object literal
        var selectors = {
            'background'    : $(this).attr("bg"),
            'border-color'  : $(this).attr("border"),
            'color'         : $(this).attr("color"),
            'border-radius' : $(this).attr("radius"),
            'padding'       : $(this).attr("pad")
        };

        // Iterate over object
        for (var property in selectors) {
            if (selectors.hasOwnProperty(property)) {
                // If the current key has a property set
                if(selectors[property]) {
                    // Set CSS property of button using the object key and cached jQuery property
                    $(this).css(property, selectors[property]);
                }
            }
        }
    });
});

<button border="#ff0000" bg="#0000ff" color="#fff" pad="10px">Click Me</button>
<button border="#ff0000" bg="#0000ff" color="#b3d9ff" pad="15px">Click Me</button>
<button border="#ff0000" bg="#0000ff" color="#ffd480" pad="20px">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.each 组成属性

.each made up attributes

javascript

each

jquery

attributes