javascript - jQuery用存储在各种变量中的数据动态替换div的内容

Question

这是我的 HTML。默认情况下，container 显示一些示例文本。我想用存储在 javascript 变量中的相应 HTML 内容替换它。

<ul>
  <li><span class="link" id="item01">Menu 1</span></li>
  <li><span class="link" id="item02">Menu 2</span></li>
  <li><span class="link" id="item03">Menu 3</span></li>
  <li><span class="link" id="item04">Menu 4</span></li>
  <li><span class="link" id="item05">Menu 5</span></li>
</ul>

<div class="container">Sample Text</div>

现在 HTML 内容存储在变量 item01、item02、item03 等中。这就是我创建的 jQuery。

<script type="text/javascript">
  <!--
  $(document).ready(function() {
    var item01 = '<span>Content of item 1</span>';
    var item02 = '<span>Content of item 2</span>';
    var item03 = '<span>Content of item 3</span>';
    var item04 = '<span>Content of item 4</span>';
    var item05 = '<span>Content of item 5</span>';

    $('.link').on('click',function(){
       var $this = $(this);
       $itemNum = $this.attr("id");
       $('.container').html( $itemNum );
    });
  });
  //-->
</script>

但它并没有完全按照我的意愿工作。它打印 div container 中元素的 ID，而不是存储在该特定变量中的 HTML。

我在这里做错了什么？

Answer 1

我建议您将 HTML 存储在一个对象中，以便您可以通过键访问它:

var content = {
    item01: '<span>Content of item 1</span>',
    item02: '<span>Content of item 2</span>',
    item03: '<span>Content of item 3</span>',
    item04: '<span>Content of item 4</span>',
    item05: '<span>Content of item 5</span>'
}

$('.link').on('click',function(){
   $('.container').html(content[this.id]);
});