1 Dernière modification par stephane.liger (22-06-2017 20:19:14)

Sujet : PB ardu que je n'arrive pas à résoudre

Bonjour,

But du code, simplifier la modification des balises <h3> dans une page html

<!-- Accordion -->
    <h2 class="demoHeaders">Accordion</h2>
    <div id="accordion">
        <h3>Affichage</h3>
        <div id="affichage">
        </div>
        <h3>Modification</h3>        
        <div>
        <form id="modification"></form>
        </div>
        <h3>Script</h3>
        <div ><textarea id="script"></textarea></div>
    </div>
<script>
    $( function() {
        $( "#accordion" ).accordion({
            heightStyle: "content"
        });
        $("#script").change(function(){
            
            $("#affichage").html($(this).val());
            
            $("#modification").html($(this).val());
                
            $("#modification h3").each(function(index) {

                var var1=$(this).text();
                $(this).attr("id",index);
                $("#modification h3").html("<input type='text' />");
                $('input').attr("value",var1);
                //index++
                alert(var1);
            });
        }); 
        
    });
</script>

Donc j'ai 3 espaces dans ma page, un espace qui affiche le code normalement #affichage, un qui l'affiche pour le modifer #modification et un qui l'affiche avec les balises.
Si je modifie le code dans script, les données dans affichage s'affiche bien mais pas dans modification, est ce quelqu'un peut me venir en aide.
Merci davance.
Stéphane

Re : PB ardu que je n'arrive pas à résoudre

Lorsque je rentre

<h3>1</h3>

c'est bon.
mais si je rentre

<h3>1</h3>
<h3>2</h3>

Les champs créé dans #modification sont vides.

Re : PB ardu que je n'arrive pas à résoudre

Je mets la réponse si cela peut aider.

$("#script").change(function(){
            $("#affichage").html($(this).val());
            $("#modification").html($(this).val());
            $("#modification h3").each(function(index) {
                var var1=$(this).text();
                $(this).attr("id","h3"+index);
                $("#modification #h3"+index).html('<input type="text" id="h3input'+index+'"/>');
                $("#h3input"+index).val(var1);
            });
});

Bonne journée
Stéphane