1

Buenas estoy intentando cambiar el valor de data-precio con una función de jquery, pero con (this) par que detecte cual tiene que cambiar, pero no lo consigo.

Iteración de servicios

@foreach ($order->casa->elementosAdicionales as $item)
  <tr>
    <td class="td_flex">
       <div class="form-check form-check-inline poscheck">
                                                                                    
        <input type="text" name="precioNuevo" id="precioNuevo" value="{{ $item->precio }}" class="inputPrecioServ">
                                                                                    
        <input class="form-check-input checkServicios" type="checkbox" id="{{ $item->id }}" data-precio="{{ $item->precio }}" name="adicionales[]" value="{{ $item->id }}" @if($condicion) checked @endif>
       </div>
     </td>
    </tr>
@endforeach

Quiero que el valor que le ponga en el input precioNuevo lo ponga en el data-precio en el checkbox .checkServicios

$("input[name='precioNuevo']").on('keyup',function(){
    var dInput = this.value;
    console.log(dInput);
    $(this).find(".checkServicios").attr('data-precio', dInput);
})

No hay forma de con (this) acceder al siguiente elemento sin ser hijo? o hay forma de convertir esto en padre/hijo ?? Al ser una iteración solo necesito que me cambie el que toca, no todos.

2 respuestas 2

1

Usando el método next() de jQuery tienes acceso al "hermano" siguiente del elemento que estás modificando.

Te dejo un ejemplo simple sin el uso de ciclos ya que no tengo acceso a tus datos, tú lo debes acoplar a tu proyecto. Evita el uso de id en ciclos, a no ser que este se pueda diferenciar en cada iteración.

$("input[name='precioNuevo']").on('keyup',function(){
    var dInput = $(this).val();
    console.log(dInput);
    //Usando el método next() ubicas el hermano siguiente al input que estás modificando 
    $(this).next().attr('data-precio', dInput);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td class="td_flex">
    <div class="form-check form-check-inline poscheck">
      <input type="text" name="precioNuevo" value="1000" class="inputPrecioServ">
      <input class="form-check-input checkServicios" type="checkbox" id="2540" data-precio="1000" name="adicionales[]" value="2540">
    </div>
  </td>
</tr>
<tr>
  <td class="td_flex">
    <div class="form-check form-check-inline poscheck">
      <input type="text" name="precioNuevo" value="2000" class="inputPrecioServ">
      <input class="form-check-input checkServicios" type="checkbox" id="2541" data-precio="2000" name="adicionales[]" value="2541">
    </div>
  </td>
</tr>

1
  • 1
    Genial! Funciona perfecto, muchas gracias!
    – Miguel
    Commented el 14 feb. 2023 a las 17:58
0

Si lo que quieres es simplemente que lo que ingreses en el input cambie el valor en el "data-precio", this hace referencia al input #precioNuevo asi que para que modifique el checkbox no necesita usar this para buscar el checkbox, llamelo directamente, y seria mejor usar el evento input ya que el keyup se activa incluso si la tecla no hace nada.

$( document ).ready(function() {
        $("input[name='precioNuevo']").on('input',function(){
            var dInput = this.value;
            console.log(dInput);
            $(".checkServicios").attr('data-precio', dInput);
        })
    });
3
  • Buenas y gracias por tu respuesta, pero piensa que estoy en una iteración, esto que me indicas fue donde empece, y en el caso de terner 3 iteraciones me modifica las 3 data-precio @Jhandres187
    – Miguel
    Commented el 13 feb. 2023 a las 16:04
  • No se bien como se hace, pero no se puede acceder al siguiente elemento con this algo así input[name='precioNuevo'] > checkServicios
    – Miguel
    Commented el 13 feb. 2023 a las 16:06
  • Hola Jhandres187, bienvenido, mira como responder y aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener tu primer medalla! Commented el 13 feb. 2023 a las 16:24

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.