如何獲取另一個對象內部的對象的名稱？

Question

我正在一個項目中，以打開自定義對話框。 我正在嘗試這樣做，以便在settings對象中，您可以將自定義按鈕的名稱指定為對象的名稱，並在其中包含按鈕的信息。 我想知道，我怎么按鈕的名字叫什么？

我當前擁有的代碼是這樣的：

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

或者你可以使用Object.keys這是在es5.1介紹

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

Answer 2

嘗試在settings.button.yes上使用Object.keys()

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 ，就好像它是一個數組一樣。

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

解決方法：

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

我已經調整了用於打開對話框的對象，以將按鈕作為數組，其名稱作為數組中每個對象的屬性。

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))進行預覽。