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在change之前触发#demo事件。因此，您可能需要编写一些验证逻辑来处理此限制。

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

$(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...
  }
});

Answer 2

您已在不同的上下文中声明了 build 。这就是为什么它不可访问的原因。将 build 变量设为全局变量即可

Answer 3

let允许您声明范围限于块，语句或使用它的表达式。这不一样 var关键字，用于全局或局部定义变量整个功能，无论块范围如何

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

您需要在要使用变量的范围内声明变量。让我们像这样在ready闭包中声明变量：

$(document).ready(function() {
  let build;

  $("#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);
    }
  });
});

Answer 4

以下代码将通过使用window对象创建全局状态，该对象用于全局存储数据，我们可以在任何函数中使用window对象。

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

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

在javascript函数之外使用变量

4 个答案: