这是我的 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。
我在这里做错了什么?
最佳答案
我建议您将 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]);
});
关于javascript - jQuery用存储在各种变量中的数据动态替换div的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28767797/