引用数组的数据属性 [英] Data Attributes referencing Arrays

问题描述

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

I'm building a trivia game, and all the questions, answer choices and correct answers are to be stored in different multidimensional arrays arranged by category. example: historyArray contians all the history data, etc.

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

I'm also using bootstrap from my front end UI and would like to be able to use a data attribute to reference a specific array, and dynamically load a question from that array into a modal that will launch when pressing a button.

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

Here's what I have so far:

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'，即变量名中的第一个字母.

Currently, the console.log only returns the value of the data-attribute, not the array. How can I return the array in the console.log so then I can parse through the array, grabbing the question, answer choices and correct answer so I can display them. I've tried using console.log(aCat[0]), but that only returns 'h', the first letter in the variable name.

推荐答案

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

There's a couple of misunderstandings here first you're mistaking arrays for objects arrays are lists [] and objects are key-value pairs. {something: somethingelse} to resolve your issue first you need a way of accessing the correct list of questions.

在您的HTML中更改

data-category="historyObject"

将您的历史记录对象包装在一个名为问题的对象中

and wrap your history object in an object called 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，但是它将无法正常工作，但是您的对象在其自己的范围内，这意味着除非您移动

Now we're able to access the historyObject by questions[aCat] but it won't work yet your object is in its own scope meaning you won't be able to access questions from your event listener unless you move

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

进入您的负载.

希望这会有所帮助.

这篇关于引用数组的数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！