jQuery从数据属性中选择数组

Question

我正在尝试为我的 makeSlider 函数提供一个数组。 HTML5 Data 属性选择正确的数组。不幸的是，它没有被解释为一个数组。

它不起作用：

 values = $(this).data("slider");
 makeSlider(sliderID, targetID, values);

正在工作：

makeSlider(sliderID, targetID, dataMehrfachauswahlmatrixLeft);

HTML：

    <div class="noui-slider" id="slider-1" data-slider="dataMehrfachauswahlmatrixLeft">
      <!-- slider here -->
    </div>
    <div class="hidden-md-up">
      <!-- Store selected value -->
      <input class="form-control slider-value" id="input-target-1">
    </div>

JS（脚本.js）：

$(document).ready(function() {

  // slider array

    // Matrix 1
    var dataMehrfachauswahlmatrixLeft = [{
      id: 1,
      value: "sehr wichtig"
    }, {
      id: 2,
      value: ""
    }, {
      id: 3,
      value: ""
    }, {
      id: 4,
      value: ""
    }, {
      id: 5,
      value: "unwichtig"
    }, {
      id: null,
      value: "weiß nicht"
    }];

    // Matrix 2
    var dataMehrfachauswahlmatrixRight = [{
      id: 1,
      value: "in hohem Maße"
    }, {
      id: 2,
      value: ""
    }, {
      id: 3,
      value: ""
    }, {
      id: 4,
      value: ""
    }, {
      id: 5,
      value: "in geringem Maße"
    }, {
      id: null,
      value: "weiß nicht"
    }];

  // build slider

  var makeSlider = function(sliderID, targetID, values) {
    ...
  }

  // init slider

  $(".noui-slider").each(function(index) {
    var sliderID = $(this).attr("id"),
        targetID = $(this).next().find(".slider-value").attr("id");
        values = $(this).data("slider");

    makeSlider(sliderID, targetID, values);
  });
});

Answer 1

当前实现的问题是变量value 没有引用定义的数组。它是一个具有值的字符串文字，即 dataMehrfachauswahlmatrixLeft、dataMehrfachauswahlmatrixRight

在window 或任何其他对象范围内定义数组。

// Matrix 1
window.dataMehrfachauswahlmatrixLeft = [...];

// Matrix 2
window.dataMehrfachauswahlmatrixRight = [...]

然后使用Bracket notation 访问对象动态属性。

values = $(this).data("slider");
makeSlider(sliderID, targetID, window[values]);

这里是一个例子

$(document).ready(function() {
    var myOBj = {};
    // slider array
    // Matrix 1
    myOBj.dataMehrfachauswahlmatrixLeft = [{
        id: 1,
        value: "sehr wichtig"
    }, {
        id: 2,
        value: ""
    }, {
        id: 3,
        value: ""
    }, {
        id: 4,
        value: ""
    }, {
        id: 5,
        value: "unwichtig"
    }, {
        id: null,
        value: "weiß nicht"
    }];
    // Matrix 2
    myOBj.dataMehrfachauswahlmatrixRight = [{
        id: 1,
        value: "in hohem Maße"
    }, {
        id: 2,
        value: ""
    }, {
        id: 3,
        value: ""
    }, {
        id: 4,
        value: ""
    }, {
        id: 5,
        value: "in geringem Maße"
    }, {
        id: null,
        value: "weiß nicht"
    }];
    // build slider
    var makeSlider = function(sliderID, targetID, values) {
        console.log(values)
    }
    $(".noui-slider").on('click', function() {
        var values = $(this).data("slider");
        makeSlider(1, 2, myOBj[values]);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixLeft'>1</div>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixRight'>2</div>