修改

Question

如果这个问题是基本的或没有正确询问，我道歉。我一直在网站上搜索几个小时试图修复......

我正在尝试制作猜谜游戏。在获取提交的下拉值时，我检查来自另一个数组对象（theComputer [i]）的键的抓取值。如果存在匹配属性且其值为true，则将键和值添加到compTempObj {}。然后在重复下拉提交时，重复上述过程，每次添加匹配属性＆amp;值为同一个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!');
            }
        }
    });
}

Answer 1

问题是compTempObj的范围是click事件处理程序的本地范围。每次点击它都会被创建，因为它的定义在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!');
     }
}

我对compTempArr感到困惑。它没有定义所以我不知道该变量的范围。

如果您想重用compTempObj，请将其范围提高一些，或将其作为全局变量。

修改

如果compTempArr是全局的，您可以执行以下操作并重复使用compTempObj

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 = compTempArr[0] || {};


        // compTempObj.prop = computerHas;
        compTempObj[computerHas] = theComputer[i][computerHas];

        if(compTempArr.length === 0)
            compTempArr.push(compTempObj);
        console.log(compTempArr);
     } else {
        // Run function to make computer guess will go here
        console.log('Noooooooooo!');
     }
}

我正在做的是将compTempObj推到compTempArr作为第一个属性。 IDK，如果您使用compTempArr进行其他任何操作，但由于它是全局范围的，因此可以执行此操作。然而！！我建议您执行以下操作：

重命名变量，以便他们解释您要执行的操作或描述的内容。 temp是一种可怕的命名做法，不要这样做！
将您的游戏数据定义为单个对象，并使该对象具有全局范围。这样你的游戏逻辑就可以访问游戏数据，而不用担心范围界定。
将您的函数定义为命名函数，并将它们传递给事件处理程序。这样你就可以在一个地方整理你的游戏逻辑，而不是将你的游戏逻辑和游戏设置混合在一起。

祝你好运！

Answer 2

在每个选项中，您可能需要为其添加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 =（$（＆＃34; .featureList＆＃34;）。val（））;你会得到你选择的价值：）

Answer 3

除非我完全遗漏了一些东西，否则我认为答案就是简单地将变量声明移到函数之外。每次执行click事件时，您都会重新创建对象。所以不是......

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

... ...做

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

根据grabInputVal函数的范围，您可能需要将其置于此范围之外。

另外，正如Plaimanus Lueondee指出的那样，你的选项标签需要一个值属性。或者只使用所选选项的文本，如此......

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

Answer 4

希望它能帮助你找到正确的方向 -

var computerHas = ($(".featureList").val());为您提供一个数组，那么您指的是什么价值？（检查您是否要使用$(".featureList").each(function(){})）
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 ..........
    }

如何在重复点击时键入和重视同一个对象

4 个答案:

修改