正在調用錯誤屬性的對象

Question

我目前正在構建一個類似PCPartPicker的網站，但用於學校項目的水冷零件。我在努力，我有一些問題。在作爲這個最重要的： 這裏是我的對象構造開始

var cpuCollection = []; 
var myComputer = []; 
function CPU(frequency,cores,socket,name) { 
    this.name = name; 
    this.frequency = frequency; 
    this.cores = cores; 
    this.socket = socket; 

    cpuCollection.push(this); 
} 

var i75930k = new CPU(3.6, 6, 2011.3, "i7 5930k"); 
var i54690k = new CPU(3.6, 4, 1150, "i5 4960k");` 

我建對象的構造我做了使用真實電腦配件的一些測試對象後。

在我的HTML我有下拉使用此代碼由對象填充的菜單上載：

$(cpuCollection).each(function() { 
    $('#cpusel').append($("<option> " + this.name + "</option>")) 
}); 

從那裏我想讓它這樣，當在下拉列表中正確選擇一個選項對象將被推入myCPU var中，以便在另一個函數中進行兼容性測試。我曾經做到這一點的代碼如下：

$('#cpusel').change(function() { 
    myCPU = new CPU(); 
    $(cpuCollection).each(function(){ 
     if(this.name = $('#cpusel :selected').text()) { 
      myCPU = this; 
     } 
    }); 
}); 

不幸的是這個代碼目前不工作，並告訴我，myCPU.socket是1150當i75930k被選中時，它真的應該2011.3。我在這裏結束智慧並想取得一些進展。 感謝您的幫助提前。

編輯：我解決了等號問題，現在我想這個問題可能源於我將對象推入cpuCollection數組的方式。當我嘗試和記錄cpuCollection時，我得到[CPU，CPU]，這顯然不是我想要的。我如何將創建時的CPU對象推到cpuCollection中，並保持其所有屬性不變。

Answer 1

在你if（）語句試試這個：

$('#cpusel').change(function() { 
myCPU = new CPU(); 
$(cpuCollection).each(function(){ 
    if(this.name === $('#cpusel :selected').text()) { 
     myCPU = this; 
    } 
}); 

Answer 2

所以，有幾個問題與一些你的邏輯/語法的，我會盡量單獨解決這些問題，以便您可以更好地瞭解我得到了一個可行的解決方案：

1）您正在將元素從對象定義中推送到數組。這通常是不好的做法，因爲它不可重用，並且如果在CPU對象的實例實例化之前未定義名爲cpuCollection的數組，則會引發錯誤。這是更好地說cpuCollection.push(new CPU(...));

2）當您添加的選項的下拉列表中，您應添加value財產爲好，這樣你可以更輕鬆地搶到＃3

3）值如果在<option>元素上設置值的值，不需要查找所選選項的文本，你可以簡化你的選擇器到$('#cpusel').val()

4）沒有必要通過說你的數組包裝在一個jQuery對象$(cpuCollection).each(...)，你可以（也應該）使用內置的香草JavaScript數組操作。 5）我在更改處理程序中將.each()更改爲.some()，這是因爲當您從.some()返回true時，它將停止任何進一步的迭代，這正是您想要的。以前，它會繼續循環到最後，即使它已經找到了匹配的CPU。

6）我添加了一個myCPU變量並將它初始化爲null，所以如果你在嚴格模式下運行，你的變更處理程序不會爲以前未定義的變量拋出錯誤。

7）你的if語句中的邏輯做了一項任務，而不是比較，因爲你用=代替== or ===，這個簡單的錯誤。

希望這會有所幫助！

var cpuCollection = []; 
 
var myComputer = []; 
 
var myCPU = null; 
 
function CPU(frequency,cores,socket,name) { 
 
    this.name = name; 
 
    this.frequency = frequency; 
 
    this.cores = cores; 
 
    this.socket = socket; 
 
} 
 

 
cpuCollection.push(new CPU(3.6, 6, 2011.3, "i7 5930k")); 
 
cpuCollection.push(new CPU(3.6, 4, 1150, "i5 4960k")); 
 

 
cpuCollection.forEach(function(cpu, index) { 
 
    $('#cpusel').append($('<option value="'+ cpu.name + '">' + cpu.name + '</option>')) 
 
}); 
 

 
$('#cpusel').change(function() { 
 
    myCPU = new CPU(); 
 
    cpuCollection.some(function(cpu, index){ 
 
    if(cpu.name === $('#cpusel').val()) { 
 
     myCPU = cpu; 
 
     return true; 
 
    } 
 
    }); 
 
    console.log(myCPU); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="cpusel"></select>

Answer 3

有簡單的方法（S）：

var cpuCollection = []; 
var myComputer = []; 

function CPU(frequency,cores,socket,name) { 
    cpuCollection.push({ 
     name:  name, 
     frequency: frequency, 
     cores:  cores, 
     socket: socket 
    }); 
} 

var i75930k = CPU(3.6, 6, 2011.3, "i7 5930k"); 
var i54690k = CPU(3.6, 4, 1150, "i5 4960k"); 

$(cpuCollection).each(function(i,cpu) { 
    var option = $('<option/>').html(cpu.name).data('cpu',cpu); 
    $('#cpusel').append(option); 
}); 

$('#cpusel').change(function() { 

    var selected = $(this).find('option:selected'); 
    var text = $(selected).text(); 
    var myCPU; 

    // You can simply use : myCPU = $(selected).data("cpu") 
    console.log('via data:',$(selected).data("cpu")); 

    $(cpuCollection).each(function(i,cpu){ 
     if($.trim(cpu.name) == $.trim(text)) { 
      myCPU = cpu; 
      // return false; ==> break the each(); 
     } 
    }); 
    console.log('via each:',myCPU); 
}); 

看到這個demo。