Question

好的，我尝试了5次不同的修改，我很确定我的代码变得越来越糟，所以我想我应该停下来寻求帮助。

这是我想要做的事情：

HTML中的

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

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

正如你所看到的，我制作了几个属性并给每个属性一个值。

我想使用jquery来选择每个按钮，对于每个按钮，循环浏览每个属性并获取值并添加具有该值的真实属性。

例如，它会看到border =＆＃34;＃ff0000＆＃34;并创建一个border-color：＃ff0000：CSS属性并将其附加到该按钮。它会看到bg =＆＃34;＃0000ff＆＃34;属性并附上background-color：＃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)
            }
        });
    });
});

如果我没有任何意义，请告诉我=]

更新

以下代码有效，但我无法感觉有更简单/更短的代码编码方式，因为您可以看到我重复了相同的代码。

$(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

很高兴看到您找到了可行的解决方案。关于优化您的答案，您可以采取一些方法。我在下面分享了一个您可能会觉得有用的内容，其中一些评论总结了发生了什么。

＆＃13;

$(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]);
                }
            }
        }
    });
});

＆＃13;

<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>

＆＃13;

每个人都有属性

1 个答案: