Multi clone
coffy
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
bonjour,
j'ai ce code HTML que l'on va appelé OUTIL:
Ce code javascript pour affiche le texte de l'input:
et ce code javascript pour générer des copies de l'élément dupliqué
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
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:
- Multi clone
- Clone disque dur - Guide
- Clone cd - Télécharger - Gravure
- Hd clone - Télécharger - Sauvegarde
- Virtual clone drive - Télécharger - Divers Utilitaires
- Clone dvd - Télécharger - Gravure
1 réponse
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 :
Un début de solution possible :
Bonne journée,
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,
