j'ai besoin d 'aide car je n'arrive pas à réaliser ce que je veux avec ce code ( à modifier bien sûr).
1) j'arrive à afficher le texte en live et modifiable à volonté mais impossible sur celui qui est dupliqué
2) lorsqu'on choisit un nombre, je veux que se soit uniquement cette quantité qui sera dupliqué ( alors que là plus on clique sur le bouton "dupliquate", cela affiche plusieurs fois le texte dupliqué
3) l'outil est cloné mais impossible de l'utiliser ( il doit être toujours indépendant, repart à zéro )
4) j'ai mis des annotations dans le code qui s'afficheront sur le rendu
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="outil">
<----------------------------------------------- DEBUT OUTIL ------------------------------------------------------------->
<br/>
<br/>
<div class="toNumDuplicate">
<input type="text" class="heading" /> <---- texte à saisir ---->
<br/>
<br/>
<input id="num-duplication" type="number" > <---- nombre de fois que le texte saisie sera duppliqué ---->
<br/>
<br/>
<button id="btn_dupliquate">dupliquate</button> <---- valide la duplication ---->
<div class="common_preview" >
<br/>
<p class="model"><span>TEST</span> <---- texte qui apparait et évolue en fonction de la saisie ----></p>
</div>
</div>
<div class="result"><span></span><---- texte dupliqué et texte qui apparait en fonction de la saisie ----></div> <br/>
<----------------------------------------------- FIN OUTIL -------------------------------------------------------------><br/>
<br/>
</div>
<br/>
<button id="btn-duppliquer">CLONE</button> <---- clone entièrement l'outil ---->
<br/>
<br/>
<br/>
<h3>LE NOUVEL OUTIL CLONÉ EST INDÉPENDANT DE L'OUTIL ORIGINAL </h3>
$(function() {
$('body').on('keyup', '.heading', function() {
var heading = $(this).val();
$(".common_preview", $(this).parent()).html("<p class='model'><span style='background:red; padding:10px; color:#fff; font-weight:bold'>"+heading+"</span><---- texte qui apparait en fonction de la saisie ----></p>");
return false;
});
var idDuplicated = 0;
$('#btn-duppliquer').click(function() {
var duplicated = $('#outil').clone();
idDuplicated += 1;
duplicated.attr('class', 'outil' + idDuplicated);
$('body').append(duplicated);
});
});
$(function() {
$('#btn_dupliquate').on('click', function() {
var numDuplication = $('#num-duplication').val();
if (numDuplication > -1) {
var div = $('.common_preview');
$('.result').html('');
for (var i = 0; i < numDuplication; i++) {
$('.result').append(div.clone());
}
}
});
});
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.