引用数组的数据属性[重复]

Question

我正在构建一个问答游戏，所有的问题、答案选择和正确答案都将存储在按类别排列的不同多维数组中。例如：historyArray 包含所有历史数据等。

我还在前端 UI 中使用引导程序，并且希望能够使用数据属性来引用特定数组，并将该数组中的问题动态加载到按下按钮时将启动的模式中。

这是我目前所拥有的：

HTML：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#activeQuestion" data-category="historyArray">
  Launch Random Question
</button>

<div class="modal fade activeQuestion" id="activeQuestion" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Category Title</h4>
      </div>
      <div class="modal-body">
        <form>
            <div class="row">
                <div class="col-xs-12 question">
                    <p></p>
                </div>
                <div class="col-xs-12 answers">
                    <ul class="answer-list">
                    </ul>
                </div>
            </div>
        </form>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS：

var historyCount = 0;

$(document).ready(function(){
    //$('#activeQuestion').modal('show');

    var historyArray = {
        'q0' : {
            'question': 'Which U.S. President is on the 1,000 dollar bill?',
            'a1': 'Ulysses S. Grant',
            'a2': 'Grover Cleveland',
            'a3': 'William McKinley',
            'correct': '1'
        }
    }
});

$('#activeQuestion').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var aCat = button.data('category');
    console.log(aCat);
})

目前，console.log 只返回数据属性的值，而不是数组。如何在 console.log 中返回数组，然后我可以解析数组，获取问题、答案选择和正确答案，以便显示它们。我试过使用console.log(aCat[0])，但只返回'h'，变量名中的第一个字母。

Answer 1

这里有几个误解，首先您将数组误认为对象数组是列表[]，而对象是键值对。 {something: somethingelse} 要首先解决您的问题，您需要一种访问正确问题列表的方法。

在您的 HTML 中更改它

data-category="historyObject"

并将你的历史对象包装在一个名为 questions 的对象中

    var questions = {
       historyObject: {
         'q0' : {
           'question': 'Which U.S. President is on the 1,000 dollar bill?',
           'a1': 'Ulysses S. Grant',
           'a2': 'Grover Cleveland',
           'a3': 'William McKinley',
           'correct': '1'
         }
      }
    }

现在我们可以通过 questions[aCat] 访问 historyObject，但它不起作用，但您的对象在其自己的范围内，这意味着您将无法访问来自事件侦听器的问题，除非您移动

$('#activeQuestion').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var aCat = button.data('category');
    console.log(questions[aCat]);
})

进入你的onload。

希望这会有所帮助。

Answer 2

没有提供 JSON 字符串作为 data- 属性值，您可以将不同主题的问题放在同一个对象中（下面的topicArrays）并使用data-category 值作为属性键来访问它们。

var topicArrays = {};

var historyCount = 0;
$(document).ready(function(){
    //$('#activeQuestion').modal('show');

    topicArrays.historyArray = {
        'q0' : {
            'question': 'Which U.S. President is on the 1,000 dollar bill?',
            'a1': 'Ulysses S. Grant',
            'a2': 'Grover Cleveland',
            'a3': 'William McKinley',
            'correct': '1'
        }
    };
});

$('#activeQuestion').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var aCat = topicArrays[button.data('category')];
    console.log(aCat);
});