Data Attributes referencing Arrays [duplicate]

问题

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.

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

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.

回答1:

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.

change this in your 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'
         }
      }
    }

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

into your onload.

hope this helped.

回答2:

Short of providing JSON string as data- attribute value, you can put questions on different topics in the same object (topicArrays below) and access them using data-category values as property keys.

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

来源：https://stackoverflow.com/questions/49285779/data-attributes-referencing-arrays

标签

javascript

jquery

arrays

twitter-bootstrap

bootstrap-modal