en utilisant le préfixe et supprimer

Question

J'utilise .prepend() et .remove() pour afficher les éléments de menu dans l'ordre un utilisateur clique dessus.

$(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>'); 

    }); 
}); 

J'utilise .remove() pour supprimer l'élément si elle existe déjà et le .prepend() pour le mettre en haut du conteneur div

De cette façon, l'utilisateur peut afficher autant ou aussi peu du menu articles comme ils veulent à la fois et dans l'ordre où ils cliquent sur eux, mais les doublons ne devraient pas apparaître.

Par exemple. L'utilisateur peut cliquer MenuItem3 puis MenuItem1 ensuite MenuItem2 et les éléments apparaissent ci-dessous:

Item2 Item1 Item3

La première moitié de mon script fonctionne # Item1 mais # item2 n'a pas, il ne cesse de faire des doublons.

Aussi, si je fais # item1 puis # item2 puis # item1 à nouveau, je reçois un doublon.

Qu'est-ce que je fais mal ici? Y a-t-il une meilleure manière de faire cela?

Answer 1

Vous n'avez réellement pas besoin de la fonction remove(). Cela devrait fonctionner correctement, en supposant que votre HTML est similaire:

<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>