Question

我的页面有许多滑块，允许用户选择两个范围之间的值。每当滑块移动时，数字都会更新等，并显示一个新的数字。

为了扩展这个，我想添加一个自由文本字段，用户可以在其中输入数字，然后从总数中减去。

我有以下代码但不知道如何将变量传递给现有的javascript，如果我只使用expenseamount则不会显示任何内容。

<script type="text/javascript">
$(document).ready(function() {
$("#expense").change(function(){
var expenseamount = $(this).val(); 
});
});
</script>

感谢您的帮助到目前为止，但仍然没有发生任何事情 - 我的完整脚本现在如下：

<script> 
$( ".slider" ).slider({
range: "min",
value: 50,
min:10,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
},
});

var amount= $( ".slider" ).slider( "value" );

var expenseamount;
$(document).ready(function() {
$("#expense").change(function(){
expenseamount = $(this).val(); 
});
});

amount2 = amount - expenseamount;
$("#total" ).text(amount2);

</script>

Answer 1

最简单的答案是在使用之前将expenseamount声明为全局变量。然后它将可用于项目中的所有脚本。在.ready()处理程序中声明它使其成为该处理函数内的局部变量，因此它在项目的其他位置不可用。以下是将其声明为全局变量的方法：

script type="text/javascript">

var expenseamount;

$(document).ready(function() {
    $("#expense").change(function(){
        expenseamount = $(this).val(); 
    });
});
</script>

通常最好添加尽可能少的全局变量，因为它们可能相互冲突。如果您只想拥有一个像这样的全局或者它是一个非常简单的应用程序，那么上述技术就可以了。

另一方面，如果您的应用程序非常庞大，并且可能是其他人为其提供代码的大型项目的一部分，那么您可能希望采取措施避免全局变量冲突。在这种情况下，您将创建一个顶级全局变量，并在其上添加如下属性：

script type="text/javascript">

// make sure myAppGlobals is defined as an object
// but if it has already been defined, don't overwrite it
var myAppGlobals = myAppGlobals || {};

$(document).ready(function() {
    $("#expense").change(function(){
        myAppGlobals.expenseamount = $(this).val(); 
    });
});
</script>

Answer 2

好吧，你可以取出var，它会使expenseamount成为一个全局变量。但是，当涉及到正确的编码实践时，这将是可怕的。

我建议您创建某种对象来保存这样的常见数据并使其成为全局数据。可能也想添加一些简单的命名空间：

var AppData = AppData || {};

AppData.expenseAmount = 0;

//...

$(doument).ready(function () {
    $("#expense").change(function(){
        AppData.expenseAmount = $(this).val(); 
    });
});

//...

function someOtherFunction() {
    alert(AppData.expenseAmount); //you get the point.
}

PS - 这是一种“应该在任何地方工作”的修复方式。您应该考虑您的具体情况和JavaScript的能力来做一些很棒的事情（比如闭包），以便将expenseAmount的可用性限制在仅需要的地方。因此，澄清一下，这不是最佳解决方案，它是我可以提供的最佳解决方案，而无需了解有关您的代码结构的更多信息。你应该努力改进它。

Answer 3

Javascript具有函数作用域，这意味着函数中定义的变量在这些函数中是可用的。因此，在您想要存在的范围（全局范围）中声明变量。

var expenseamount;

$(document).ready(function() {
  $("#expense").change(function(){
    expenseamount = $(this).val(); 
  });
});

// expenseamount can now be used from anywhere

在页面的其他地方使用javascript变量

3 个答案: