Question

我正在开发一个项目来打开自定义对话框。我试图在settings对象中进行此操作，您可以指定自定义按钮＆＃39;将名称作为对象的名称，其中包含按钮的信息。我想知道，如何我得到了按钮的名称＆＃39;名字？

我目前的代码是：

function resetTools() {
    Dialogue.open({
        message: "Are you sure you want to reset all chat rooms?",
        buttons: {
            yes: {
                styleSheetClass: "dangerbtn",
                onclick: function() {
                    // Do stuff here
                }
            },
            no: {
                onclick: function() {
                    // Do other stuff here
                }
            }
        }
    })
}

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = message.buttons;
        for (var i = 0; i < buttons.length; i++) {
            var cls  = buttons[i].styleSheetClass.length ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}

感谢您的帮助。

Answer 1

您可以使用for...in循环来获取对象的密钥，并记住使用hasOwnProperty来测试属性的存在

for (var key in buttons) {
  if (buttons.hasOwnProperty(key)) {
    // key could be 'yes' or 'no'
    // access the value using buttons[key]
  }
}

或者您可以使用es5.1中引入的Object.keys

Object.keys(buttons).forEach(function(key) {
  // do something with buttons[key]
})

Answer 2

尝试在Object.keys()

上使用settings.button.yes

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = setting.buttons.yes;
        Object.keys(buttons).forEach(function(button) {
          if (button === "styleSheetClass") {
            var cls  = buttons[button].length 
                       ? buttons[button] + " dialogueButton" 
                       : "dialogueButton";
            $(".dialogue .buttons")
            .append('<div class="' + cls + '">' +  +'</div>');
          }
        })
    }
}

Answer 3

有两个错误......

首先是

var buttons = message.buttons;

这会使buttons成为undefined。

应该是

var buttons = settings.buttons;

接下来，由于您的buttons是一个对象，因此您需要一个for..in循环来提取密钥名称。

所以在一天结束时你的代码应该是

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = settings.buttons; // <<<< NOTE: It's settings.buttons.
        for (var button in buttons) {
            console.log(button); // This will give you yes in 1st iteration and no in 2nd.
            var cls  = buttons[button].styleSheetClass.length ? buttons[button].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}

Answer 4

Object.keys(buttons).forEach(function (name) {
    var button = buttons[name];
    // now you have both
});

Answer 5

您在第24行遇到问题（此代码段中有25个）。您正在使用buttons，就像它是一个数组一样。

＆＃13;

function resetTools() {
    Dialogue.open({
        message: "Are you sure you want to reset all chat rooms?",
        buttons: {
            yes: {
                styleSheetClass: "dangerbtn",
                onclick: function() {
                    // Do stuff here
                }
            },
            no: {
                onclick: function() {
                    // Do other stuff here
                }
            }
        }
    })
}

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = settings.buttons;
        //                           vvv buttons isn't an array, it's an object
        for (var i = 0; i < buttons.length; i++) {
            var cls  = buttons[i].styleSheetClass.length ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}

＆＃13;

这是一个修复：

＆＃13;

function resetTools() {
    Dialogue.open({
        message: "Are you sure you want to reset all chat rooms?",
        buttons: [
            {
              name: 'Yes',
              styleSheetClass: "dangerbtn",
              onclick: function() {
                // Do stuff here
              }
            }, {
              name: 'No',
              onclick: function() {
                // Do stuff here
              }
            },
        ]
    })
}

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = message.buttons;
        for (var i = 0; i < buttons.length; i++) {
            var cls  = buttons[i].styleSheetClass != undefined ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' + buttons[i].name +'</div>');
        }
    }
}

＆＃13;

我已经调整了打开对话框的对象，将按钮作为数组，并将名称作为数组中每个对象的属性。

Answer 6

您可以使用jQuery并按照以下方式执行此操作：

$.each(buttons, function(button_name, button) {
    // code ...
});

或者没有jQuery：

var keys = Object.keys(buttons);

for(var i = 0; i < keys.length; i++) {
    var button_name = keys[i];
    var button = buttons[button_name];

    // code ...
}

Object.keys为您提供此对象中元素的名称。

您可以使用console.log(Object.keys(buttons))进行预览。

如何获取另一个对象内的对象的名称？

6 个答案: