通過obj鍵訪問屬性

Question

我已將我的工作簡化爲這個小例子。

我正在寫一個類「myClass」，它有幾個屬性（用戶，名稱，重量，高度）和目標列表（=元素ID）的庫。這個想法是，如果我更新我的課程，目標中的所有數據都會更新。

在我的例子中，你會注意到「test123」。這是我不知道該怎麼做的部分。這給我們帶來了我的問題：

要動態更新每個目標，我創建了一個包含所有類名稱和屬性名稱作爲關鍵字的對象（請參閱：this.classNames）。如果我有密鑰（例如：用戶），我可以訪問this.user嗎？這甚至有可能嗎？

這裏是一個工作的jsfiddle：Demo

JS

(function() { 
    var myClass = function (o) { 
     if (!(this instanceof myClass)) { 
      return new myClass(o); 
     } 
     if (typeof o === 'undefined') { 
      o = {}; 
     }; 

     this.user = o.user || 'unknown'; 
     this.name = o.name || 'unknown'; 
     this.weight = o.weight || 'unknown'; 
     this.height = o.height || 'unknown'; 

     //targets -- strings that start with # 
     this.targets = []; 

     this.classNames = { 
      user: '.user', 
      name: '.name', 
      weight: '.weight', 
      height: '.height' 
     }; 

    }; 
    myClass.fn = myClass.prototype = { 
     init: function() {} 
    }; 
    //must start with # 
    myClass.fn.addTarget = function (tar) { 
     this.targets.push(tar); 
     return this; 
    }; 
    myClass.fn.update = function (o, callback) { 
     if (typeof o === 'undefined') { 
      o = {}; 
     } 

     this.user = o.user || this.user; 
     this.name = o.name || this.name; 
     this.weight = o.weight || this.weight; 
     this.height = o.height || this.height; 

     var $this = this; 

     //asynchronous update 
     setTimeout(function() { 
      //Here I loop through all the targets     
      $.each($this.targets, function (index, value) { 

       console.log(index + ' ' + value); 

       //Here I loop through all the classNames 
       $.each($this.classNames, function (key, className) { 
        console.log(key + ' ' + className); 
        //I only want to replace text 
        $(value).find(className).contents().filter(function() { 
         return (this.nodeType == 3); 
        //=== Problem Here=== With "key" how do I access attributes? 
        }).replaceWith('test123'); 

       }); 
      }); 
      if (!(typeof callback === 'undefined')) { 
       callback(); 
      } 
     }, 0); 
    }; 

    //exporting lib 
    window.myClass = myClass; 
})(); 
myClass().addTarget('#target1').addTarget('#target2').update({ 
    user: 'Grimbode', 
    name: 'Kevin' 
}, function() { 
    console.log('update has finished'); 
}); 

HTML

<div id="target1"> 
    <div class="user">a</div> 
    <div class="name">b</div> 
    <div class="weight">c</div> 
    <div class="height">d</div> 
</div> 
<div id="target2"> 
    <div class="user">e</div> 
    <div class="name">f</div> 
    <div class="weight">g</div> 
    <div class="height">h</div> 
</div> 

Answer 1

如果我理解正確的話，你想要做的就是查找什麼物業$this對應className在.replaceWith行的異步更新循環中。如果是這樣，改變

.replaceWith('test123"); 

到

.replaceWith($this[className.substring(1)]); 

在JavaScript中，您可以用點符號和屬性名稱字面訪問屬性名稱（例如，obj.foo），或用括號標記和屬性名稱字符串（例如，obj["foo"]）。在後一種情況下，字符串可以是任何表達式的結果。

在你的代碼，className擁有領先於它.（例如，".user"），所以我們要刪除（.substring(1)）獲取屬性名稱（例如，"user"），然後用在[...]查找屬性值。

Updated Fiddle