contenu à une liste annexant en utilisant la case

Question

Merci à l'aide précieuse de plusieurs participants Stack Overflow, je suis très proche des résultats souhaités ... voici un résumé et mise à jour, pour les parties intéressées:

J'ai une série de modules de produits, dont chacun contient (entre autres) le nom du produit et une case à cocher «Comparer». Mon objectif est de générer une liste de produits sélectionnés dans une autre zone de la page lorsque les cases à cocher sont cochées. Comme il doit y avoir une fonction pour vérifier un minimum de deux, et un maximum arbitraire - soit dans le cadre de la fonction checkbox .click (par la version de Brian, merci encore pour votre aide inestimable), ou sur le soumettre (que je suis penché vers). Dans les deux cas, le nombre d'éléments dans la liste est apparemment mal compté; w/zéro ou une case cochée, je reçois correctement une alerte d'éléments insuffisants; Toutefois, si je désélectionne et revérifie quelques fois, mon code signale le nombre incorrect d'éléments dans la liste. Dans l'intérêt de la brièveté (!), Je renoncerai à poster les deux versions, car je rencontre des similitudes similaires dans les deux. Voici mon dernier bricolage - merci d'avance pour toute idée.

<div class="product-module"> 

<div class="product-pic"> 
    <div class="checkbox-wrapper"> 
     <label for="compare1"> 
      <input type="checkbox" class="checkbox" name="compare" id="compare1" /> 
      Compare 
     </label> 
    </div> 
</div> 

<div class="product-info"> 
    <p> 
     <a href="#" title="#"><span class="product-name">Product Name here</span></a><br /> 
    </p> 
</div> 

<div class="compare"> 
<ul> 
</ul> 
<p class="error" style="display: none;">ACK! You've selected more than 4 products to compare.</p> 
<p class="compare-button"><button type="submit">Compare</button></p> 
<p class="clear-selections"><a class="button" id="clear-selections" href="#">Clear Selections</a></p> 

<script type="text/javascript"> 

$(function(){ 
    $('input[type="checkbox"]').attr('checked', false); 
}); 

$(function(){ 
    $('input[type="checkbox"]').click(function(){ 
     var title = $(this).closest('.product-module').find('.product-name').html(); 

     // as user checks the checkbox, add the item to the ul 
     if($(this).attr('checked')){ 

     var html = '<li><a href="'+title+'">' + title + '</a></li>'; 

     $('.compare ul').append(html); 
     } else {  
     // if user is un-checking the checkbox, remove the item from the ul 
     // orig: $('li[title="' + title + '"]').remove(); 
     $('li a[href="' + title + '"]').remove(); 
     } 
    }); 
}); 


$(function(){ 
    $('.clear-selections').click(function(){ 
     $('.compare ul').empty(); 
     $('input[type="checkbox"]').attr('checked', false); 
    }) 
}); 


$(function(){ 
    $('.compare button').click(function(){ 
     minRequests = 2; 
     maxRequests = 4; 
     requested = $('.compare ul li').size(); // go figure: why not .length()? 

     if(requested < 2) { 
     alert ('Compare ' + requested + ' products?'); 

     } else if((requested >= 2) && (requested <= 5)) { 
     alert ('There are ' + requested + ' products to compare'); 

     } else { 
     alert (requested + ' is too many'); 
     } 
    }); 
}); 

Answer 1

Voici l'approche que je prends: http://jsfiddle.net/ek2zh/ Je n'ai pas utilisé de clone parce que le noeud que vous voulez coller est un span et que vous voulez le cloner dans un li. Pas sûr que le clone ajustera automatiquement le noeud comme désiré.

Answer 2

Je devine que votre code est le clonage du clone .Product nom et le clonage à nouveau. Essayez d'utiliser un chemin plus spécifique pour cibler l'élément votre clonage, au lieu de la méthode find.