Question

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

我也使用来自我的前端UI的bootstrap，并希望能够使用数据属性来引用特定的数组，并动态地将该数组中的问题加载到按下按钮时将启动的模态中。

这是我到目前为止所拥有的：

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仅返回data-attribute的值，而不是数组。如何在console.log中返回数组，以便我可以解析数组，抓取问题，回答选择并更正答案，以便我可以显示它们。我尝试过使用console.log（aCat [0]），但只返回'h'，这是变量名中的第一个字母。

Answer 1

这里有一些误解，首先你会误认为数组对象数组是列表[[ 0.33333333] [ 0.33333333]]而对象是键值对。 []首先解决您的问题，您需要一种方法来访问正确的问题列表。

在HTML中更改此内容

{something: somethingelse}

并将历史对象包装在名为questions

的对象中

data-category="historyObject"

现在我们可以通过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' } } }访问historyObject了，但是它不起作用你的对象在它自己的范围内意味着你将无法从你的事件监听器访问问题，除非你移动< / p>

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);
});

引用数组的数据属性

2 个答案: