Javascript 如何在重复单击时为同一对象设置关键帧和值

如果这个问题是基本的或者问得不恰当，我表示歉意。我已经搜索了几个小时的网站，试图得到一个修复

我想做一个猜谜游戏。 在获取提交时的下拉值时，我根据另一个数组对象computer[I]的键检查所获取的值。如果存在匹配的属性，且其值为true，则将键和值添加到compTempObj{}。然后在重复下拉提交时，重复上述过程，每次将匹配的属性和值添加到相同的compTempObj{}。它几乎可以工作，只是每次单击都会添加一个新对象，而不是添加到同一个对象

下拉列表：

<select class="featureList">
<option class="charFeature">male</option>
<option class="charFeature">female</option>
<option class="charFeature">black hair</option>
<option class="charFeature">white hair</option>
<option class="charFeature">blonde hair</option>
<option class="charFeature">red hair</option>
<option class="charFeature">blue hair</option>
<option class="charFeature">purple hair</option>
<option class="charFeature">beard</option>
<option class="charFeature">moustache</option>
<option class="charFeature">glasses</option>
<option class="charFeature">earrings</option>
<option class="charFeature">hat</option>
<option class="charFeature">green eyes</option>
<option class="charFeature">black eyes</option>
</select>

我的JS：

//Get SELECT values
function grabInputVal() {
    // click event on <select> submit
    $(".pickAFeatureBtn").on('click', function(e) {
        e.preventDefault();
        // Assign <select> value to var
        var computerHas = ($(".featureList").val());
        theComputer;
        //check theComputer array for computerHas(select) property
        for (var i = 0; i < theComputer.length; i++) {
            // line below check for property val from dropdown against theComputer 
            if (theComputer[i].hasOwnProperty(computerHas) && theComputer[i][computerHas] === true) {
                var compTempObj = {};
                // compTempObj.prop = computerHas;
                compTempObj[computerHas] = theComputer[i][computerHas];
                compTempArr.push(compTempObj);
                console.log(compTempArr);
            } else {
                // Run function to make computer guess will go here
                console.log('Noooooooooo!');
            }
        }
    });
}

---

在每个选项中，您可能需要为其添加value属性

<select class="featureList">
  <option class="charFeature" value="male" >male</option>
  <option class="charFeature" value="female" >female</option>
  <option class="charFeature" value="black hair" >black hair</option>
  ....
</select>

---

然后var computerHas=$.featureList.val；您将获得选项的值：

，除非我完全遗漏了什么，否则我认为答案是将变量声明移到函数之外。每次单击事件执行时，您都在创建对象。所以不是

$(".pickAFeatureBtn").on('click', function(e) {
    ...
    var compTempObj = {};
    ...
}

…做

var compTempObj = {};
$(".pickAFeatureBtn").on('click', function(e) {
    ...
}

根据grabInputVal函数的作用域，您可能需要将其置于该函数之外

另外，正如Plaimanus Lueondee指出的，选项标记需要一个值属性。或者只是像这样使用所选选项的文本

$(".featureList option:selected").text();

---

问题是compTempObj的作用域是click事件处理程序的本地作用域。每次单击都会创建它，因为它的定义在单击函数中：

for (var i = 0; i < theComputer.length; i++) {
    // line below check for property val from dropdown against theComputer 
    if (theComputer[i].hasOwnProperty(computerHas) && theComputer[i][computerHas] === true) {


        // THIS VARIABLE IS LOCAL SCOPE!!  
        // Move the definition up higher to have a larger scope
        var compTempObj = {};


        // compTempObj.prop = computerHas;
        compTempObj[computerHas] = theComputer[i][computerHas];
        compTempArr.push(compTempObj);
        console.log(compTempArr);
     } else {
        // Run function to make computer guess will go here
        console.log('Noooooooooo!');
     }
}

我正在做的是将compTempObj作为第一个属性推送到compTempArr上。IDK，如果您将compTempArr用于其他任何用途，但由于它是全局范围的，您可以这样做。然而我建议采取以下措施：

重命名变量，以便它们解释您试图做什么或它们描述什么。temp是一个糟糕的命名实践，不要这样做！ 将游戏数据定义为单个对象，并对该对象进行全局范围限定。这样，您的游戏逻辑就可以访问游戏数据，而不必担心范围问题。 将函数定义为命名函数，并将它们传递到事件处理程序中。这样你就可以在一个地方组织你的游戏逻辑，而不是把你的游戏逻辑和游戏设置混在一起。

---

祝你好运

希望它能帮助你进入正确的方向-

var computerHas=$.featureList.val；给你一个数组，你指的是什么值？检查是否要使用$.featureList.eachfunction{} 每次调用该函数时，都会覆盖var compTempObj。因此每次都是新的。 也许你应该用-

var YourVariable;
// Since it is defined outside the function value will not be overwritten each time function is called

    function your_function(){
        ............YOUR CODE ..........

        // YourVariable = AssignNewValue

        ............MORE CODE ..........
    }

---

为了澄清，您如何使用grabInputVal函数？什么时候/怎么叫？因为它似乎没有必要，尽管我不能确定，除非我能看到你所有的代码。谢谢。我会的。我只是一名学生，我正在努力推动自己与这个项目，所以感谢帮助位。compTempArr是一个数组定义的全球。谢谢你，我会尝试在代码中将compTempObj放在它旁边。如果是这样，我会编辑我的答案以获得另一个解决方案。你已经避免了我的另一半头发被拔出。因为这个，我整天都在经历冒名顶替综合症。再次感谢。哈！很高兴我能帮忙！一定要试着把代码分成块。听起来可能不多，但如果代码看起来更有条理，那么调试就容易多了！选择值不是数组，除非它是$。featureList.val将只提供第一个值，而不是所有值。要引用特定值，我们可以使用$.featureList.eqINDEX.val。

var YourVariable;
// Since it is defined outside the function value will not be overwritten each time function is called

    function your_function(){
        ............YOUR CODE ..........

        // YourVariable = AssignNewValue

        ............MORE CODE ..........
    }