Question

当我尝试执行console.log(answers.slot1);时，出现一个错误，提示未定义answers。怎么了？

这是我的全部代码。从HTML页面调用函数handleDropEvent，该页面与实际问题无关。

$(function() {
  const correct = [{
    slot: "slot1",
    item: "item3"
  }, {
    slot: "slot2",
    item: "item5"
  }, {
    slot: "slot3",
    item: "item2"
  }, {
    slot: "slot4",
    item: "item7"
  }, {
    slot: "slot5",
    item: "item7"
  }, {
    slot: "slot6",
    item: "item4"
  }];

  var answers = [{
    slot1: ""
  }, {
    slot2: ""
  }]

  function handleDropEvent(event, ui) {
    var item = ui.draggable;
    var slot = $(this).attr('id');
    ui.draggable.position({ 
      of: $(this),
      my: 'left top',
      at: 'left top'
    });

    console.log(answers.slot1);
  }

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">

     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <div class="content">


<img src="image1.png">

<div id="slot1" class="ui-widget-header">
  <p>holder</p>
</div>

<div id="slot2" class="ui-widget-header">
  <p>holder</p>
</div>

<div id="slot3" class="ui-widget-header">
  <p>holder</p>
</div>

<div id="slot4" class="ui-widget-header">
  <p>holder</p>
</div>

<div id="slot5" class="ui-widget-header">
  <p>holder</p>
</div>

<div id="slot6" class="ui-widget-header">
  <p>holder</p>
</div>

<div id="slot7" class="ui-widget-header">
  <p>holder</p>
</div>

<div id="slot8" class="ui-widget-header">
  <p>holder</p>
</div>

<br><br><br>

<div id="item1" class="item item1 ui-widget-content">
</div>
<div id="item2" class="item item2 ui-widget-content">
</div>
<div id="item3" class="item item3 ui-widget-content">
</div>
<div id="item4" class="item item4 ui-widget-content">
</div>
<div id="item5" class="item item5 ui-widget-content">
</div>
<div id="item6" class="item item6 ui-widget-content">
</div>
<div id="item7" class="item item7 ui-widget-content">
</div>
<div id="item8" class="item item8 ui-widget-content">
</div>

 </div>
</body>
</html>

Answer 1

answers.slot1将获得array的slot1属性。您需要获取array的第一个元素，然后访问其属性

var answers = [
    {slot1: ""},
    {slot2: ""}
]
console.log(answers[0].slot1)

Answer 2

在您的代码中，answers是一个数组，而不是对象：

  var answers = [{
    slot1: ""
  }, {
    slot2: ""
  }]

所以console.log(answers.slot1);会返回undefined。

要使上述方法起作用，您首先需要在数组中进行迭代，例如：

console.log(answers[0].slot1); // Outputs ""

如果想要像这样保持结构answers.slot1，也许最好定义一个对象：

var answers = {
  slot1: "foo",
  slot2: "bar"
}

console.log(answers.slot1); // Outputs "foo"

如果您要在函数中访问answers ，请确保在调用函数之前已对其进行了定义（因为调用handleDropEvent()时代码不会显示）

例如：

这会抛出answers is not defined：

function handleDropEvent(event, ui) {
  console.log(answers)
}

handleDropEvent() // Outputs "answers is not defined"

var answers = {
  slot1: "foo",
  slot2: "bar"
}

在调用handleDropEvent时，尚未定义answers。

工作示例：

function handleDropEvent(event, ui) {
  console.log(answers.slot1)
}

var answers = {
  slot1: "foo",
  slot2: "bar"
}

handleDropEvent() // Outputs "foo"

正如其他用户指出的那样，我们无法准确地按原样调试您的代码，因为handleDropEvent不会在您提供的代码中调用引发错误的代码。

变量甚至没有定义

2 个答案: