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