我需要创建一个点击事件,用链接中包含的 div(.clickContent) 的内容替换特定 div (#main_view) 的内容。这是代码:
<div id="main_view">Main View Target</div>
<ul class="webbies">
<li data-id="ab">
<a href="#"><img src="content/images/webby-andy-clarke.png" width="110" height="110" alt="" /></a>
<div class="clickContent">This is the click content</div>
</li>
</ul>
<script type="text/javascript">
$("ul.webbies li a").click(function() {
var content = $(this).html($('.clickContent').html());
$("#main_view").replace(content);
return false;
});
</script>
我似乎无法弄清楚如何定位 .clickContent div 的内容,然后替换 main_view div。
在此先感谢您的帮助。
最佳答案
它比你想象的要简单得多:
$("ul.webbies li a").click(function(e) {
e.preventDefault();
$("#main_view").html($('.clickContent').html());
});
现在,如果您有多个 .clickContent
div,您可能需要调整选择器。
例如这将选择被点击链接的下一个兄弟:
$("ul.webbies li a").click(function(e) {
e.preventDefault();
var content = $(this).next('.clickContent').html();
if(content) $("#main_view").html(content);
});
同样重要的是要注意,如果复制的内容包含具有 ID 的元素,您可能会破坏 JavaScript,因为您随后会拥有多个具有相同 ID 的元素。
关于jquery - 用另一个 div 的内容替换一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5081817/