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

Question

<分区>

Answer 1

好吧，我想我得到了你想要的，这花了我一段时间。您现在唯一需要做的就是编辑数组中的值以显示其他文本。 (已设置增量)。

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