使用jquery将变量传递给函数答案

【问题标题】：passing variables to function with jquery使用jquery将变量传递给函数
【发布时间】：2017-08-20 21:17:58
【问题描述】：

虽然我使用 PHP，但我是 javascript 新手。

我在使用 javascript/jquery 在 href 上的 onclick 事件上传递变量时遇到问题。

我从远程 URL 拉取 json 数据，每个请求需要 3 个参数。

日期、价格和货币。

我有一个函数来构建如下所示的 URL：

function getIndexData(date, price, currency){
    ajaxURL = "/data/"+date+"/"+price+"/"+currency+"";
}

这很好用，可以构建我需要的 URL。

但是，我在页面上有一个 jquery datepicker，可以将日期更改为我想要的任何日期：

$(function () {
        $("#datepicker").datepicker(
            {
                dateFormat: 'yymmdd',
                onSelect: function (date) {
                    getIndexData(date, price, currency )
                }
            }
        );
    });

即使之前已设置价格和货币，它们现在也“未定义”。

我对 onclick 事件有同样的问题 - 如果我尝试使用（例如）发送价格或货币：

<a href="javascript:void(0);" onclick="getIndexData('date','price','currency')">NET</a></span>

价格和货币未定义。

有没有一种方法可以只将一个变量发送到我的函数，同时保留已经存在的值？

对于必须是一个非常基本的问题表示歉意。我只是对此很陌生，而且我显然在此过程中误解了一些东西。

【问题讨论】：

如果你能创建一个 fiddle 或 sn-p，那肯定会有帮助。
onSelect: function (date) { 必须是 onSelect: function (date, price, currency) {。这意味着您必须将所有三个变量都传递给您的 onselect 回调
^ 有人想知道为什么 datepicker onSelect 方法会有这三个参数，而它应该只有两个参数，日期和实例？
那么您在哪里设置价格、货币等？

标签： javascript jquery function variables onclick

【解决方案1】：

好的，这是更新的答案。如您所见，如果在代码的全局范围内声明变量，日期选择器函数将可以访问它。我认为它以前不起作用，因为 html 是错误的。我删除了所有的 html，只包含了日期选择器，如果您在浏览器中对其进行测试，您将在控制台中看到价格、货币变量在日期选择器 onSelect 函数中可用，您还可以在其中执行函数 getIndexData .我已将该函数分配给一个变量，这样如果您想使用该函数，您可以使用变量 getIndexData。

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
  </head>
  <body>
  <div class="col-sm-5 index-grid">
  <span class="grid-label">Price</span>
  <span class="btn btn-grid"><a href="javascript:void(0);" onclick="getIndexData(indexDate, indexCurrency ,indexPrice);">CLOSE</a></span>
   <span class="btn btn-grid"><a href="javascript:void(0);" onclick="getIndexData(indexDate, indexCurrency ,indexPrice);">RETURN</a></span>
  <span class="btn btn-grid"><a href="javascript:void(0);" onclick="getIndexData(indexDate, indexCurrency ,indexPrice);">NET</a></span>
</div>
<p>Date: <input type="text" id="datepicker"></p>
  </body>
  </html>
<script>

var ajaxURL;
var indexDate = "2017-08-20"
var indexPrice = "closeprice";
var indexCurrency = "EUR";


var getIndexData = function (indexDate, indexCurrency, indexPrice) {
  ajaxURL = "/data/" + indexDate + "/" + indexPrice + "/" + indexCurrency + "";
  alert(ajaxURL);

}

$(document).ready(function() {
  $(function() {
    $("#datepicker").datepicker({
      dateFormat: 'yymmdd',
      onSelect: function(date) {
      console.log(date);
      console.log(indexPrice);
      console.log(indexCurrency);
      console.log(getIndexData);

      }
    });
  });
});
</script>

【讨论】：

这些似乎都不起作用，但我想这可能只是因为我对此感到非常困惑。我只想能够将单个参数传递给一个函数，同时保留其他参数已经存在的值，但这让我很困惑。
如果你能告诉我更多的代码或 js fiddle，我会很高兴更多地研究它
谢谢 - 我会试着把代码放在这里看看是否有帮助 - 它是代码的摘录。此处的代码太长，无法通过。
好吧，至少看看价格和货币变量的来源和设置位置会很好
我已经在小提琴中放了一些 html 和 javascript，但显然它不起作用。 jsfiddle.net/uy9Lf0jc

【解决方案2】：

如果您在以下范围内申报价格和货币：

$(function () {
        $("#datepicker").datepicker(
            {
                dateFormat: 'yymmdd',
                onSelect: function (date) {
                    getIndexData(date, price, currency )
                }
            }
        );
    });

那么您需要做的是使用“this”关键字来访问价格和货币的值。就像下面的例子一样。您可能还想查看此链接以获取更多信息：https://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

$(function () {
        $("#datepicker").datepicker(
            {
                dateFormat: 'yymmdd',
                onSelect: function (date) {
                    getIndexData(date, this.price, this.currency )
                }
            }
        );
    });

【讨论】：