2

estoy trabajando en una vista previa de en donde puedes cambiar los valores y se muestran en automático solo que no sé por qué razón , al usar una función con jQuery esta cambia todos los valores de los di cuando solo se especifica en la función cual se cambia, aquí el ejemplo:

// estos son lo input que tendrán el nuevo valor:
<div class="input-group mb-3">
<span class="input-group-text" style="background-color: #e047ab ;" id="basic-addon1">Titulo</span>
<input type="text" name="Titulo" id="Tituloinput" class="form-control mr-3">
</div>

<div class="input-group mb-3">
<span class="input-group-text" style="background-color: #5e50d8 ;" id="basic-addon1">Parrafo 1</span>
<input type="text" name="Parrafo1" id="ParrafoInput1" class="form-control mr-3">
</div>

// Estos son los div a cambiar :
<div id="Titulo" style="background-color: #e047ab ;" style="font-size: 3em;">Titulo</div>
<div id="Parrafo1" style="background-color: #5e50d8 ;">Parrafo1</div>
       //CAMBIAR TITULO 
       $(".FormularioTicket ").bind("change","div#Tituloinput",function(){
           Parrafo1()
       });

       function Parrafo1(){
           var parrafo1 = document.getElementById('Tituloinput').value;
           document.getElementById('Titulo').innerHTML=parrafo1;   
       }
       //CAMBIAR TITULO 

       //CAMBIAR PARRAFO1 
       $(".FormularioTicket").bind("change", "div#ParrafoInput1",function(){
           Parrafo2()
       });

       function Parrafo2(){
           var parrafo2 = document.getElementById('ParrafoInput1').value;
           document.getElementById('Parrafo1').innerHTML=parrafo2;
       } 

pienso que tiene que ver algo la función bind debería usar una nueva versión de jQuery para solucionar esto o estoy haciendo algo mal ?

0

1 respuesta 1

2

No se que versión usas de jQuery, pero creo que el método change() está en todas ellas, y lo puedes aprovechar para hacerlo de este modo (he cambiado todas las funciones javascript puras por métodos de jquery, pues o bien usas unas o bien otras, pero mezclarlas no es buena idea y no facilita su lectura):

$(".FormularioTicket ").change(function() {
  inputModificado = $(event.target)
  switch (inputModificado.attr('id')) {
    case "Tituloinput":
      $('#Titulo').html(inputModificado.val());
      break;
    case "ParrafoInput1":
      $('#Parrafo1').html(inputModificado.val());
      break;
  }
});

Es decir, en una sola captura del evento discriminamos cual es el id que lo lanza mediante el atributo id del elemento representado por $(event.target), que es el que lanza el evento en primera instancia antes de ir escalándolo por la jerarquía y que termina llegando al elemento con la clase FormularioTicket que lo contiene.

Luego, mediante un switch, identificamos su id y evaluamos si realizamos una acción u otra mediante sus claúsulas case. Y como ya tenemos el elemento asignado a event.target no hace falta hacerlo con un getElementById() ni usar más funciones, pues lo ponemos todo en la misma claúsula case y nos ahorramos algo de código.

Aquí te dejo un ejemplo completo funcional:

$(".FormularioTicket ").change(function() {
  inputModificado = $(event.target)
  switch (inputModificado.attr('id')) {
    case "Tituloinput":
      $('#Titulo').html(inputModificado.val());
      break;
    case "ParrafoInput1":
      $('#Parrafo1').html(inputModificado.val());
      break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="FormularioTicket">
  <div class="input-group mb-3">
    <span class="input-group-text" style="background-color: #e047ab ;" id="basic-addon1">Titulo</span>
    <input type="text" name="Titulo" id="Tituloinput" class="form-control mr-3">
  </div>

  <div class="input-group mb-3">
    <span class="input-group-text" style="background-color: #5e50d8 ;" id="basic-addon2">Parrafo 1</span>
    <input type="text" name="Parrafo1" id="ParrafoInput1" class="form-control mr-3">
  </div>
  <div id="Titulo" style="background-color: #e047ab ; font-size: 3em;">Titulo</div>
  <div id="Parrafo1" style="background-color: #5e50d8 ;">Parrafo1</div>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.