1
<script type="text/javascript">
    $(document).ready(function()
    {
        var nproducto = [];
        var btnProducto_comprado;
        var numero_de_productos_en_inventario;
        numero_de_productos_en_inventario = 3;           
        var contador = [];
        for (nproducto = 0; nproducto <= numero_de_productos_en_inventario; nproducto++) 
        {
        $(".card-deck").append(

                   "<div class=\"card\"> <div id=\""+nproducto+"\" class=\"card-body\"> <span class=\"productos\" id=\"Producto"+nproducto+"\"> <h4 class=\"card-title\" >Producto "+nproducto+"</h4> <p class=\"card-text\"> Producto "+nproducto+" descripcion </p> <img src=\"img/"+nproducto+".jpg\" height=\"64px\" width=\"64px\"> </span> <button type=\"button\" class=\"btn btn-primary\" id=\"btn"+nproducto+"\">Añadir al servicio</button> </div> <div class=\"card-footer\"> <small class=\"text-muted\"> Aqui el precio del producto </small> </div> </div>"
        );

        contador[nproducto] = $("#btn"+nproducto+"").click(function()                                  
            {
                alert ("pediste el producto:"+nproducto+"");           
            });
        };            
    });
</script>

Tengo este código que genera tantos divs con los productos que deseo mostrar en mi página. el asunto es que no consigo que el alert me indique que número de producto pedí, sin importar que botón presione siempre me indica "pediste el producto:4"

Probablemente vean horrores en el código pero ya he hecho tantas pruebas que que no se que hacer.

Apreciaría mucho su ayuda

2
  • Buenas, he intentando corregir un poco tu codigo, pero me es imposible, no estoy muy prepara para lo que tienes ahì. Commented el 31 mar. 2018 a las 11:12
  • 1
    Lo que te puedo decir es en los string no deberias de poner comillas dentro de comillas. Ejemplo: "Lo que envuelve el sting con comillas dobles 'y las que pongas dentro' sean comillas simples" O viceversa. Otro consejo es que leas como formular una pregunta para que la detalles mejor y sea mas facil ayudarte. Suerte. Commented el 31 mar. 2018 a las 11:23

3 respuestas 3

2

En primer lugar, te muestra producto 4 porque en el bucle es el último valor que asignas a la variable nproducto.

Algunas correcciones a tu código:

  1. Como consejo, no uses tanto HTML en el JavaScript, a menos que utilices template string (de ECMAScript 2015) o bien utilizando jQUery con HTML oculto.
  2. La forma en que agregas el listener al botón de cada producto, es un poco extraña. Creo que es preferible agregar un atributo data-id=""a cada producto y agregar el listener fuera del bucle.
  3. Declaras la variable nproducto como un array y luego la utilizas como índice del bucle, aunque funcione esto no es correcto.

Ejemplo, usando jQuery y la función .copy() para generar un template.

var products = [{
    "id": "1",
    "title": "occaecat consequat dolor",
    "desc": "Nulla minim dolore anim ullamco anim. Nisi anim incididunt anim est sunt esse sint id non consectetur.\r\n",
    "img": "http://placehold.it/150x80",
    "price": "132"
  },
  {
    "id": "2",
    "title": "minim qui nulla",
    "desc": "Magna consectetur eu in quis. Occaecat ipsum sit labore in enim aute est.",
    "img": "http://placehold.it/150x80",
    "price": "136"
  },
  {
    "id": "3",
    "title": "veniam aliquip qui",
    "desc": "Reprehenderit enim amet nisi eiusmod quis. In dolore cupidatat non non aute ut sint.",
    "img": "http://placehold.it/150x80",
    "price": "82"
  }
]

var $products_container = $('.products');
var $product_template,product_id;

// ADD PRODUCTS IN CONTAINER
products.forEach(product => {
  $product_template = $('#card-template').clone(); // Copy the template

  // Template parse values
  product_id = 'product-' + product.id;
  $product_template.attr('id', product_id);
  $product_template.find('.card-title').text(product.title);
  $product_template.find('.product-img').attr('src', product.img).attr('alt', product.title);
  $product_template.find('.product-desc').text(product.desc);
  $product_template.find('.product-price').text(product.price);
  $product_template.find('.product-add-btn').attr('id', product_id);
  $product_template.find('.product-add-btn').attr('data-id', product.id);

  $products_container.append($product_template);
});

// ADD EVENT LISTENERS
$products_container.on('click', '.product-add-btn', function($event) {
  var _product_id = $(this).data('id');

  var _product = products.find(function(p) {
    return p.id == _product_id;
  });

  alert('ID: ' + _product.id + '\nTitle: ' + _product.title + '\nPrice: ' + _product.price);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<!-- PRODUCTS CONTAINER-->
<div class="container">
  <div class="products card-group"></div>
</div>

<!-- PRODUCT TEMPLATE -->
<div id="product-template" style="display:none">
  <div class="card" id="card-template">
    <img class="card-img-top product-img" src="" alt="">
    <div class="card-body">
      <h5 class="card-title product-title"></h5>
      <p class="card-text product-desc"></p>
      <small class="text-muted product-price"></small>
    </div>
    <div class="card-footer">
      <a href="#" class="btn btn-primary product-add-btn">ADD PRODUCT</a>
    </div>
  </div>
</div>

En este ejemplo he utilizado un HTML oculto para representar un template. Con jQuery he creado dentro del bucle una copia de este HTML.

Para agregar el evento a cada botón de producto, he utilizado la función on() de jQuery agregando la clase del botón de producto.

0

Itenta guardar la informacion del producto en el elemento y no en una variable. Esto se haria agregando un atributo que contenta la info del producto. Luego utilizas el metodo .on para obtener esa informacion.

En el button eliminas id=\""+nproducto+"\" por data-producto=\""+nproducto+"\" y le agregas la clase producto-button:

<div data-producto=\""+nproducto+"\" class=\"card-body producto-button\">
  //...
</div>

Luego el evento clic pones fuera del for y al dar clic, buscas el atributo data-producto del elemento que le fue dado clic:

$(".producto-button").on("click", function(){
   alert("EL producto seleccionado fue" + $(this).data("proudcto");
});
0

Mil gracias por su ayuda! me sirvio muchisimo sus respuestas chicos. estamos en este proyecto solo un compañero y yo y estamos bastantes nuevos en esto. Aprecio mucho esta comunidad

Saludos.

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.