[SOLUCIONADO] Cómo escribir una función para varios productos

movil_af · #1 (**permalink**) 07/04/2013, 20:39

Estimad@s los saludo como nuevo usuario de foro, y comienzo con una duda:

Quiero usar una función que me permita dar resultados diferentes dependiendo de las variables que tengan mis campos de select. Y no se si la respuesta es un array, ya que no encuentro como incluirlo en mi función.
Estoy usando javascript y html.

El html es:

Incluye la cantidad producto 1:
<select id="cant1">
<option selected value="0" >/</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input name="CANTIDAD" type="hidden" value="98" id="prec1">
PRECIO $98</p>

Mi función que realiza la operación es la siguiente:

function result1(){
catt=$('#prec1').val()
catt2=$('#cant1').val()
miee=catt * catt2
$("#respuesta").html("$ " + miee)
}

Y lo que activa mi función es lo siguiente:

$('#cant1').change(function(){
result1();
totalizar();

});

Todo funciona bien, pero no se como escribirlo para otros 90 productos. Si usar arreglos o bucles, etc...

Gracias!!!

emprear · #2 (**permalink**) 07/04/2013, 21:18

Si lo entiendo correctamente, algo asi

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Bind jQuery</title>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
 
$('.ln').bind('change', function() {
var valor = $(this).val();
valor = parseInt(valor);
var laclase = $(this).attr('id');
var coeficiente = $('.'+ laclase).val();
coeficiente = parseInt(coeficiente);
var resultado = valor*coeficiente;
alert(resultado);
});
 
});
//]]>
</script>
 
</head>
<body>
<select id="cant1" class="ln">
 <option selected value="0" >0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 </select>
 <input name="CANTIDAD" type="hidden" value="98" class="cant1">
 PRECIO $98</p>
 
 <select id="cant2" class="ln">
 <option selected value="0" >0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 </select>
 <input name="CANTIDAD" type="hidden" value="45" class="cant2">
 PRECIO $45</p>
</body>
</html>

Primero le dás a todos tus selects una misma clase, y a tus inputs hidden le das una clase con igual nombre al id del select al que pertenecen.
Luego usas bind para agregar el evento change a los selects con lo que vas a tener la cantidad y el precio unitario para sacar el producto
Saludos

movil_af · #3 (**permalink**) 07/04/2013, 23:20

Perfecto!!! es lo que buscaba!! No sabía del bind,pero voy a documentarme más.
Sólo agregué unas lineas a tu código para que escriba el resultado en diferentes divs, relacionados con los ids, agradezco!!!!

<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Bind jQuery</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.ln').bind('change', function() {
var valor = $(this).val();
valor = parseInt(valor);
var laclase = $(this).attr('id');
var coeficiente = $('.'+ laclase).val();
coeficiente = parseInt(coeficiente);
var resultado = valor*coeficiente;
var respuesta="respuesta";
$('#' + respuesta + laclase).html("$ " + resultado);
});
});
//]]>
</script>

</head>
<body>
<p>
<select id="1" class="ln">
<option selected value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input name="CANTIDAD" type="hidden" value="98" class="1">
PRECIO $98</p>

<p>
<select id="2" class="ln">
<option selected value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input name="CANTIDAD" type="hidden" value="45" class="2">
PRECIO $45</p>

<p>SUBTOTAL 1<div id="respuesta1"></div></p>
<p>SUBTOTAL 2<div id="respuesta2"></div></p>

</body>
</html>