Question

我是jQuery的新手，所以我希望有一个简单的答案。

我有一个JSON文件，其中包含不同日期的不同文本字符串。我还有一个html范围滑块，我使用<datalist>标签来定义滑块上的特定日期。我编写了一个$.getJSON函数，它嵌套了一个$.each()函数来从JSON文件中提取字符串。

我需要编写功能，根据滑块位置显示不同的字符串。

这是我的jQuery：

var location = $('#state-dates')[0];

$(document).on('input', '#state-dates', function() {
  if (location === 1911) {
    $.getJSON('Arizona.json', function(inputOne){
      $.each(inputOne.first, function(i, field){
        $("#leg-control").html(field.legControl);
      });
    });
  }
  else if (location === 1943) {
    $.getJSON('Arizona.json', function(inputTwo){
      $.each(inputTwo.second, function(i, field){
        $("#leg-control").html(field.legControl);
      });
    });
  }
});

我的HTML：

<input type="range" min="1911" max="2013" class="bar" step=".1" list="date-list" value="1911" id="state-dates">

我是否应该使用不同的jQuery方法来检测滑块中的更改，从而显示新字符串？我也意识到我应该使用＆lt;或者＆gt;而不是=因为我希望相同的文本只在到达新定义的位置时才会改变。谢谢！

修改

为了帮助澄清，我添加了相关的JSON和HTML。

JSON：

{ 
  "first": [
    {
      "legControl": "Not recorded",
    }],
  "second": [
    {
      "leg-control": "Democratic",
    }]
}

输入文字的HTML：

<div class="json-text">
    <p class="fill-in" id="leg-control"></p>
</div>

Answer 1

我能够与我的网络开发人员朋友一起制定解决方案，以防万一其他人偶然发现这个问题，我使用的解决方案：

  //call the JSON file and store it as a variable called jdata
$.getJSON('Arizona.json', function(json) {
  jdata = json;
});

var slider = $('#sliderValue')[0];

slider.oninput = function() {
var position = this.value;
var jrows = $(jdata).filter(function (i, n) {
  return n.sYear <= position && n.eYear > position;
});
  $("#year-start").html(jrows[0].jsonLineOne);
  $("#year-end").html(jrows[0].jsonLineTwo);

};

本质上，这会获取滑块输入，并运行返回命令来检查位置。如果它在JSON文件的一个子部分的范围内，则拉出该部分。希望这可以帮助将来遇到它的任何人。

jQuery文本从HTML范围滑块更改

1 个答案: