Question

我正在使用.prepend()和.remove()按用户点击的顺序显示菜单项。

$(document).ready(function()
{
    $('#item1').click(function() 
    {

        $('#item1_content').remove();

        $('.menu_item_content').prepend('<div id="item1_content">The Box For Menu Item One</div>');

    });

    $('#item2').click(function() 
    {

        $('#item2_content').remove();

        $('.menu_item_content').prepend('<div id="item2_content">The Box For Menu Item Two</div>');

    });
});

我使用.remove()删除项目（如果已存在），.prepend()将其置于容器顶部div

通过这种方式，用户可以一次显示多个或几个菜单项，并按照他们点击的顺序显示，但不应出现重复项。

例如。用户可以单击MenuItem3，然后单击MenuItem1然后单击MenuItem2，项目将显示在下面：

项目2 项目1 项目3

我的脚本的前半部分是＃item1，但＃item2没有，它只是不断重复。

此外，如果我执行＃item1然后＃item2然后＃item1再次获得重复。

我在这里做错了什么？有更好的方法吗？

Answer 1

实际上你根本不需要remove（）函数。假设您的HTML类似，这应该可以很好地工作：

<div class="menu_item_content">
  <div id="item1">
    <div id="item1_content">MenuItem1</div>
  </div>
  <div id="item2">
    <div id="item2_content">MenuItem2</div>
  </div>
  <div id="item3">
    <div id="item3_content">MenuItem3</div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
  jQuery('.menu_item_content').children().click(function() {
    jQuery('.menu_item_content').prepend(jQuery(this));
  });
});
</script>

使用前置和删除

1 个答案: