How to create a list with definitions using javascript and jQuery?

Question

I am familiar with HTML5 and CSS3 and am just starting to learn JS. I need help creating a list of string variables and adding definitions to all of them.

Basically, I need a table with two columns, where the left column is a list of rows, and when you click on the words, it picks up the definition on the right. I also need to make sure that the page does not reload when I click on different words.

The photo (link below) best illustrates what I'm trying to create.

http://i.imgur.com/vaqXGpW.png?1

Answer 1

Well, I think I got what you want, it took me a while. The only thing you need to do is change the values ​​in the array to display different text. (Delta installed).

$(document).ready(function() { var list = { 'Alfa': 'Alfa Text', 'Bravo': 'Bravo Text', 'Charlie': 'Charlie Text', 'Delta': 'Delta is the fourth letter of the Greek alphabet.<br/><br/>In the system of Greek numerals it has a value of 4.', 'Echo': 'Echo Text', 'Foxtrot': 'Foxtrot Text', 'Golf': 'Golf Text', 'Hotel': 'Hotel Text', 'India': 'India Text', 'Juliet': 'Juliet Text', 'Kilo': 'Kilo Text', 'Lima': 'Lima Text', 'Mike': 'Mike Text', 'November': 'November Text', 'Oscar': 'Oscar Text', 'Papa': 'Papa Text', 'Quebec': 'Quebec Text', 'Romeo': 'Romeo Text', 'Sierra': 'Sierra Text', 'Tango': 'Tango Text', 'Uniform': 'Uniform Text', 'Victor': 'Victor Text', 'Whiskey': 'Whiskey Text', 'X-ray': 'X-ray Text', 'Yankee': 'Yankee Text', 'Zulu': 'Zulu Text' }; $.each(list, function(index, value) { var listitem = $('<li></li>'); $('.letterlist').append(listitem.text(index)); }); $('.letterlist li').on('click', function() { //Remove class from previous item $('.selected').removeClass('selected'); //Add class to current item $(this).addClass('selected'); var block = $('.block.right'); var descr = $('<p></p>'); var value = $(this).text(); //Empty header and content block.children('h1').empty(); block.children('.content').empty(); //Add header and content block.children('h1').text(value); block.children('.content').append(descr.html(list[value])); }); }); 

 .block { width: 250px; height: 400px; float: left; font-family: Arial, sans-serif; border: 3px solid #000; overflow-y: auto; } .letterlist, .letterlist li { list-style: none; padding: 0 20px; } .letterlist li.selected { color: #f00; background: #fac6c7; } .letterlist li:hover { cursor: pointer; } .left { font-size: 28px; } .content { background: #fac6c7; font-size: 20px; margin: 10px 20px 20px; padding: 16px 12px; } h1 { text-transform: uppercase; text-align: center; margin: 10px 0 0 0; } p { margin: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block left"> <ul class="letterlist"></ul> </div> <div class="block right"> <h1></h1> <div class="content">Select an item</div> </div> 

Answer 2

There are several ways to implement this, but if you want to specifically generate all of the data using JavaScript (for example, if you received data from an AJAX request to some API), you can get / create an object with key-value pairs corresponding to the words and their definitions respectively:

 var dictionary = { first: '<h2>First</h2> Is the 1st definition.', second: '<h2>Second</h2> Is the 2nd definition.', third: '<h2>Third</h2> Is the 3rd definition.' }; 

Let's say you have the appropriate stylized markup to start with a shell consisting of two panels: one that will contain an unordered list of words, and the other that will contain the definition text:

 <div id="words" class="panel"> <ul></ul> </div> <div id="definition" class="panel"></div> 

Here you can iterate over each of the pairs in the dictionary object, where you then create HTML elements, assign click handlers and add them to the DOM for each:

 // For each of the word/definition pairs.... $.each(dictionary, function(word, definition) { // Create a list item to hold the word var listItem = $('<li>').addClass('word').text(word); // Give the word item a click handler to display it definition when clicked listItem.click(function() { // Set the definition HTML to the current word definition $('#definition').html(definition); }); // Append it to the list of words in the DOM $('#words ul').append(listItem); }); 

Note that the click handler captures the definition in the context of the current dictionary iteration.

Here's a complete but minimal implementation of this method using jQuery with some explanatory comments:

 $(function() { // Define a dictionary of words, perhaps fetched from an API var dictionary = { first: '<h2>First</h2> Is the 1st definition.', second: '<h2>Second</h2> Is the 2nd definition.', third: '<h2>Third</h2> Is the 3rd definition.' }; // For each of the word/definition pairs.... $.each(dictionary, function(word, definition) { // Create a list item to hold the word var listItem = $('<li>').addClass('word').text(word); // Give the word item a click handler to display it definition when clicked listItem.click(function() { // Set the definition HTML to the current word definition $('#definition').html(definition); // Add the highlight class to the current element only $('#words li').removeClass('highlight'); $(this).addClass('highlight'); }); // Append it to the list of words in the DOM $('#words ul').append(listItem); }); }); 

 .panel { display: inline-block; float: left; border-style: solid; border-width: medium; min-width: 200px; min-height: 250px; margin: 5px; padding: 5px; } .word.highlight { font-weight: bold; } .word { list-style-type: none; } 

 <div id="words" class="panel"> <ul></ul> </div> <div id="definition" class="panel"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

First of all: keep your problems separate. This means that you store your templates in HTML, styles in CSS, and your application logic in JS.

Js

 var definitions = { alpha: 'Alpha definition', beta: 'Beta definition' }; var $definitionsList = $('ul#definition-list'); var $definitions = $(document.createDocumentFragment()); for (var key in definitions) { $('<li/>') .text(key) .on('click', displayDefinition.bind(null, key, definitions[key])) .appendTo($definitions); } $definitionsList.append($definitions); function displayDefinition(name, definition) { $('#definition-display h1').text(name); $('#definition-display p').text(definition); } 

HTML

 <body> <ul id="definition-list"></ul> <div id="definition-display"> <h1></h1> <p></p> </div> </body> 

CSS

 #definition-list { // Some cool styles for the list } #definition-list li { // Some cool styles for the list items }