Aquí está la situación,
Tengo varios campos con diferentes nombres de campo según los meses.
Estos son los nombres de los campos de muestra:
<input type="text" name="month-numbers" id="month-revenue-1" /> <input type="text" name="month-numbers" id="month-revenue-2" /> <input type="text" name="month-numbers" id="month-revenue-3" /> .......... <input type="text" name="month-numbers" id="month-revenue-12" />En mi javascript, tengo la matriz real creada en javascript:
var actualMonths = [1,2,3,4,5,6,7,8,9,10,11,12];Ahora, aquí está mi ciclo:
for (i=0; i < actualMonths.length; i++) { $('input#month-revenue-'+month).keyup(function(){ revenue = $(this).val(); margin = $('input#month-margin-'+month).val(); value = (margin / 100) * revenue; value = value.toLocaleString("en-US"); $('#month-price-'+month).html(value); }); }Obtiene los datos del campo correcto; sin embargo, dentro de la función keyup, parece estar tratando de colocar los datos al final del ciclo. ¿Por qué está pasando eso?
Mi resultado esperado era que cada campo se calculara de manera diferente. Por ejemplo, month-revenue-1 debería estar calculando los valores.
Si adjunta la función del controlador keyup a un elemento html principal, la misma función puede manejar el evento para todos los elementos secundarios. Utilice e.target para saber qué entrada desencadenó el evento.
$('#months').keyup(function(e) { let month = e.target.id.split('-')[2]; let revenue = $(e.target).val(); let margin = $('input#month-margin-' + month).val(); let value = (Number(margin) / 100) * Number(revenue); $('#month-price-' + month).html(value); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="months"> <input type="text" name="month-numbers" id="month-revenue-1" /> <input type="text" name="month-margins" id="month-margin-1" /> <span id="month-price-1"></span> <br /> <input type="text" name="month-numbers" id="month-revenue-2" /> <input type="text" name="month-margins" id="month-margin-2" /> <span id="month-price-2"></span> </div>