从不同的函数访问变量

Question

我有两个变量let bonus和let itemlevel2我想在 function getResponse中使用。 itemlevel2变量是 slider 的当前选择值。

目前我只能在 getResponse function 中使用itemlevel2变量，但我无法访问bonus变量。

如何正确使用 getResponse function 中的两个变量？

jQuery(function ($) {

    $(function () {   
        $("#slider-vertical").slider({
            orientation: "horizontal",
            range: "min",
            min: 0,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
            },
        });

        getResponse(0);
        $('ul#menu li').click(function () {
            let bonus = $(this).attr("value");
            getResponse(bonus);
        });

        $('#slider-vertical').on('slide', function (event, ui) {
            let itemlevel2 = $("#slider-vertical").slider("value");
            getResponse(itemlevel2);
        });

    });

    function getResponse(itemlevel2, bonus) {
        $.ajax({
            type: "GET",
            cache: "true",
            url: "itemscript.php",
            data: {
                "bonus": bonus,
                "itemlevel": itemlevel2
            },
            success: function (data) {
                $('.item-content').html('<div class="tooltipitem-site"><div class="ui-tooltip-site">' + data + '</div></div>');

            }
        });
    }
});

Answer 1

实现此目的的一种方法是反转依赖关系，以便getResponse() function 负责从 DOM 检索它所需的信息。

通过这种方式，您可以避免在不同时间设置bonus和itemlevel2值的“异步”问题，以及对任何全局变量的需要。 尝试这个：

jQuery($ => {
  $("#slider-vertical").slider({
    orientation: "horizontal",
    range: "min",
    min: 0,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
    },
  });

  getResponse(0);
  
  let $li = $('ul#menu li').on('click', function() {
    // set a class on the clicked element to be able to read its properties later
    $li.removeClass('active');
    $(this).addClass('active');
    getResponse();
  });

  $('#slider-vertical').on('slide', getResponse);
});

function getResponse() {
  let bonus = $('ul#menu li.active').attr('value');
  let itemlevel2 = $("#slider-vertical").slider("value");

  $.ajax({
    type: "GET",
    cache: "true",
    url: "itemscript.php",
    data: {
      "bonus": bonus,
      "itemlevel": itemlevel2
    },
    success: function(data) {
      $('.item-content').html('<div class="tooltipitem-site"><div class="ui-tooltip-site">' + data + '</div></div>');
    }
  });
}

作为旁注，您的代码暗示li具有无效的value属性 HTML。 如果您想在 DOM 中的元素上存储自定义元数据，请改用data属性，例如。 data-value 。