Question

我熟悉HTML5＆amp; CSS3，刚开始学习JS。我需要帮助创建一个字符串变量列表，并为所有这些变量附加定义。

基本上，我需要一个双列表，其中左列是字符串列表，当您单击这些单词时，它会拉出右侧的定义。我还需要确保在单击不同的单词时页面不会重新加载。

照片（下面的链接）最能说明我正在尝试创建的内容。

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

Answer 1

嗯，我觉得我得到了你想要的东西，它花了我一段时间。您现在唯一要做的就是编辑数组中的值以显示其他文本。（达美集团）。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

有多种方法可以实现这一点，但是如果您想使用JavaScript专门生成数据（例如，如果您从AJAX请求获取数据到某些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.'
};

假设你有一些适当的样式标记作为一个shell开始，它包含两个面板 - 一个包含无序的单词列表，另一个包含定义文本：

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

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

从这里开始，您可以遍历dictionary对象中的每个对，然后在其中创建HTML元素，分配点击处理程序，并将元素附加到DOM中：

// 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's definition when clicked
    listItem.click(function() {
        // Set the definition HTML to the current word's definition
        $('#definition').html(definition);
    });

    // Append it to the list of words in the DOM
    $('#words ul').append(listItem);
});

请注意，单击处理程序在字典的当前迭代中捕获上下文中的definition。

这是使用jQuery和一些解释性注释的这个方法的完整但最小的示例实现：

$(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's definition when clicked
        listItem.click(function() {
            // Set the definition HTML to the current word's 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

首先：将您的疑虑分开。这意味着您可以将模板保存为HTML，将样式保存在CSS中，将应用程序逻辑保存在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
}

如何使用javascript和JQuery创建包含定义的列表？

3 个答案: