Cambiamento dinamico del testo

Question

È possibile modificare dinamicamente l'ordine in questo HTML?

<li><a href="#step-4"> 
    <label class="stepNumber">4</label> 
    <span class="stepDesc"> 
    Finish<br /> 
    <small>LAST STEP</small> 
    </span>     
</a></li> 

Ho un pulsante con id 'Fine' che se cliccato presenterà alcuni dati tramite la tecnologia AJAX. Una volta fatto, vorrei cambiare le parole sopra:

Il completamento dovrebbe finire L'ULTIMO PASSO dovrebbe essere completato.

In qualsiasi modo posso farlo?

Grazie

$('#finish').click(function() { 

}); 

Answer 1

provare questo:

$(document).ready(function() { 
 
    $('#finish').on('click',function(event) { 
 
     $('.stepDesc')[0].innerHTML = 'Finished<br /><small>COMPLETED</small>' 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li><a href="#step-4"> 
 
    <label class="stepNumber">4</label> 
 
    <span class="stepDesc"> 
 
    Finish<br /> 
 
    <small>LAST STEP</small> 
 
    </span>     
 
</a></li> 
 

 
<button id="finish">Finish</button>

E proprio per riferimento futuro. Se è solo per modificare il testo utilizzare text() anziché innerHTML a causa delle prestazioni. Quindi probabilmente qualsiasi altra risposta qui usando text() è migliore in termini di prestazioni rispetto alla mia, ma lascerò che la mia rimanga qui per la diversità.

Answer 2

Modificare il text per finished e poi aggiungere i small tag.This aiuterebbe -

$('#finish').click(function() { 
    $('span.stepDesc').text('Finished').append('<br><small>Completed</small>'); 
}); 

Answer 3

Si sta tentando questo?

$('#finish').click(function() { 
    $('.stepDesc small').text('Completed') 
}); 

Answer 4

Il vostro successo ajax sarebbe come di seguito:

$('#finish').click(function() { 
    $.ajax({ 
     ... 
     ... 
     success:function(data) 
     { 
      $('span.stepDesc').text('Finished'); 
      $('span.stepDesc small').text('Completed'); 

     } 
    }); 
}); 

Answer 5

Credo che si può utilizzare:

$("#finish").click(function() { 
 
$("#step").text("COMPLETED"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="finish"> Finish </button> 
 
<li><a href="#step-4"> 
 
    <label class="stepNumber">4</label> 
 
    <span class="stepDesc"> 
 
    Finish<br /> 
 
    <small id="step">LAST STEP</small> 
 
    </span>     
 
    </a></li>

Answer 6

$('#finish').click(function() { 
$('.stepDesc').html('Finished<br /><small>COMPLETED</small>') 
}); 

Answer 7

$('#finish').click(function() { 
    $('.stepNumber .stepDesc').html('Finished<br/><small>completed</small>'); 
}); 

Spero che funzioni ..