éléments de liste remplaçant jQuery avec différents éléments de la liste des classes spécifiques

Question

J'ai un list et button ...

Si quelqu'un clique sur le bouton, je veux remplacer les éléments de liste avec différents éléments de la liste avec une certaine classe . Je les classes déjà, mais je ne sais pas comment utiliser load pour replace il ...

J'ai fait ceci:

$(document).ready(function() { 
$("#dynamic").click(function() { 
    var refreshId = setInterval(function() { 
     $('.remove-this-list-on-click').fadeOut("slow", function() { 
      $(this).load("li a.add-this-list-on-click-instead > *").fadeIn("slow"); 
     }); 
    }); 
}); 
}); 

Voici les boutons et la liste:

 <div id="dynamic">testestetest</div> 
<ul class="most_popular" id="bla"> 
    <li class="remove-this-list-on-click"></li> 
    <li class="remove-this-list-on-click"></li> 
    <li><a class="add-this-list-on-click-instead"></a></li> 
    <li><a class="add-this-list-on-click-instead"></a></li> 
</ul> 

Donc, vous pouvez voir que la liste avec la classe add-this-list-on-click-instead est déjà là, donc il devrait rester là réellement. Peut-être que nous pouvons utiliser la suppression remove-this-list-on-click éléments de la liste, mais je ne sais pas comment ... Je suppose que cela appelé tri dans votre langue .... Je veux trier les articles sur ce clic.

Voici le jSfiddle ->http://jsfiddle.net/aYtma/

Answer 1

Vous ne devez pas utiliser .load là, si les classes sont déjà là, vous n'avez pas à faire quoi que ce soit -

supprimer simplement cette ligne

$(this).load("li a.add-this-list-on-click-instead > *").fadeIn("slow"); 

et si .add-this-list-on-click-instead sont cachés initialement -

puis juste le rendre vi sible avec ceci -

$("#dynamic").click(function() { 
    $this = $(this); 
    var refreshId = setInterval(function() { 
     $('.remove-this-list-on-click').fadeOut("slow", function() { 
      $this.find("a.add-this-list-on-click-instead").fadeIn("slow"); 
     }); 
    }); 
}); 

Answer 2

Votre code HTML est incorrect. Vous avez des guillemets ouverts et des accolades fermantes incorrectes.

Correction:

<div id="dynamic">testestetest</div> 
<ul class="most_popular" id="bla"> 
    <li class="remove-this-list-on-click"></li> 
    <li class="remove-this-list-on-click"></li> 
    <li><a class="add-this-list-on-click-instead"></a></li> 
    <li><a class="add-this-list-on-click-instead"></a></li> 
</ul> 

Maintenant, il va commencer à répondre à vos atleast JS. De plus, votre question n'est pas claire si vous voulez supprimer les éléments/trier les éléments/mettre en évidence ou actualiser les éléments. Peut-être devriez-vous modifier votre question.