javascript - 在 javascript 函数之外使用变量

Question

我正在重新设计一个网站的选择下拉菜单，我正在使用一个名为 ddSlick 的 jQuery 插件。但是，我似乎无法在其功能之外捕获我需要的变量。

在下面的代码中，我似乎无法让第二个 console.log(build) 显示我在第一个 console.log(build) 中得到的内容。我得到 undefined。我可能做错了什么？

$(document).ready(function() {
  $("#demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(buildings) {
      let build = buildings.selectedData.value
      console.log(build);
    }
  });

  $("#demo").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(noises) {
      let nois = noises.selectedData.value
      console.log(nois)
      console.log(build);
    }
  });
});

Answer 1

您需要在两个函数的范围内定义 build 变量:

$(document).ready(function() {
  let build; // define here

  $("#demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(buildings) {
      build = buildings.selectedData.value;
      console.log(build);
    }
  });

  $("#demo").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: function(noises) {
      let nois = noises.selectedData.value
      console.log(nois)
      console.log(build);
    }
  });
});

这里需要注意的是，此逻辑依赖于 #demo-htmlselect 在 #demo 之前触发 change 事件。因此，您可能需要编写一些验证逻辑来​​处理此限制。

考虑到这一点，我建议将事件处理程序合并为一个并检查其中两个下拉菜单的状态，如下所示:

$(document).ready(function() {
  $("#demo, #demo-htmlselect").ddslick({
    width: 300,
    selectText: "Select an item",
    onSelected: doSomething
  });

  function doSomething() {
    let build = $('#demo-htmlselect').val();
    let noise = $('#demo').val();

    // validate both variables have values here...

    // execute whatever business logic is required based on the user input here...
  }
});