Sujet Précédent Sujet Suivant

Multi clone

Fermé
coffy - Modifié le 10 avril 2017 à 16:11
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 11 avril 2017 à 11:29
bonjour,

j'ai ce code HTML que l'on va appelé OUTIL: 

      <div id="samsung" class="tab-section">
        <h2>Getting Started</h2>
      
  
  

<div id="toNumDuplicate"> 
 <input type="text" class="heading-samsung" />  
 <br/>  

   <br/>
  <div class="wan-spinner wan-spinner-2">  
    <a href="javascript:void(0)" rel="nofollow noopener noreferrer" target="_blank" class="minus">-</a>
 <input id="samsung-num-duplication" type="text" value="0">
    <a href="javascript:void(0)" rel="nofollow noopener noreferrer" target="_blank" class="plus">+</a>
  </div>
  
  <br/><br/>
  
 <button id="samsung-dupliquer">Généré</button>
</div>
<div>

 <div id="toDuplicate-samsung">
  <div class="common_preview_samsung" >
   <div class="cadre samsung">
    <p class="modele">test</p>
    <p class="marque">SAMSUNG</p>
   </div>
  </div>
 </div>
</div>
<div class="result_samsung"></div>


</div>



Ce code javascript pour affiche le texte de l'input: 

$(function() 
 {

 $(".heading-samsung").keyup(function() 
 {
 var heading=$(this).val();
 $(".common_preview_samsung").html("<div class='cadre'><p>"+heading+"</p></div>");
 return false;
 });

 });


et ce code javascript pour générer des copies de l'élément dupliqué 
  $(document).ready(function() {
    var options = {

      plusClick: function(val) {
        console.log(val);
      },
      minusClick: function(val) {
        console.log(val);
      },
      exceptionFun: function(val) {
        console.log("excep: " + val);
      },
      valueChanged: function(val) {
        console.log('change: ' + val);
      }
    }

    $(".wan-spinner-2").WanSpinner().css("border-color", "#2C3E50");

  });


jusque là tout va bien, ce que j'aimerai faire c'est de dupliquer toute l'élément OUTIL (le modèle avant duplication) (DIV "toNumDuplicate") avec un bouton "DUPLIQUER" mais aussi que la nouvelle duplication puisse être modifiable et non dépendante de l'OUTIL("exemple changer le texte uniquement dans l’élément dupliqué, changer le nombre d'exemplaire )


ma seule idée est que lorsqu'on clique sur le bouton "DUPLIQUER", cela génère une incrémentation sur les libellé des DIV.



merci pour votre aide et si ce n'est pas clair, faite moi des retours
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié le 11 avril 2017 à 11:30
Salut,

Si j'ai bien compris ton besoin :
- Tu peux utiliser la méthode clone() de jQuery pour duppliquer un élément html. Il faudra penser à changer l'attribut id de l'élément duppliquer car un identifiant doit toujours être unique.
- Tu dois modifier l'utilisation de keyup() pour gérer le texte de l'input par l'utilisation de on() afin que cet événement fonctionne correctement pour les éléments html ajoutés de manière dynamique avec javascript lors de la duplication (plus d'info sur la délégation des événements sur la doc de la fonction on).
- Dans la fonction permettant de modifier le texte en fonction de la saisie de l'input, il faudra préciser le deuxième paramètre après le sélecteur css afin de définir dans quel élément nous cherchons ce sélecteur.
Par exemple : 
$(".common_preview_samsung") // retourne tous les éléments .common_preview_samsung du document
$(".common_preview_samsung", '#toNumDuplicate') // retourne tous les éléments .common_preview_samsung contenus dans #toNumDuplicate


Un début de solution possible : 
<div id="toNumDuplicate"> 
  <input type="text" class="heading-samsung" />  
  
  <div class="common_preview_samsung" >
   <div class="cadre samsung">
    <p class="modele">test</p>
    <p class="marque">SAMSUNG</p>
   </div>
  </div>
</div>

<button id="btn-duppliquer">Duppliquer</button>


$(function() {
  $('body').on('keyup', '.heading-samsung', function() {
    var heading = $(this).val();
    $(".common_preview_samsung", $(this).parent()).html("<div class='cadre'><p>"+heading+"</p></div>");
    return false;
  });
  
  var idDuplicated = 0;
  
  $('#btn-duppliquer').click(function() {
   var duplicated = $('#toNumDuplicate').clone();
    
    idDuplicated += 1;
    duplicated.attr('id', 'duplicated' + idDuplicated);
    
    $('body').append(duplicated);
  });
});


Bonne journée,
0

Discussions similaires

Recherche multi exp dans pokémon heart gold
tom -
Estebalignon -

6 réponses
2eme multi exp?
sohanejeff30 -
missing you -

1 réponse
Pokémon SoulSilver multi exp
Randy62 -
rieulebg -

8 réponses
Multi Exp dans Pokemon Diamant
Tomoko -
lol -

63 réponses