Tengo un problema que no puedo resolver (soy nuevo en jScript).

Tengo 3 filas, cada una contiene 4 bloques, fila en HTML a continuación (bootstrap):

<div class="row product-element">
      <div class="col-lg-3 col-md-3">
        <div class="product-element-container">
          <img src="img/1_mini.jpg" alt="Texto Alternativo 1" class="img-thumbnail">
          <h4>Some text H4</h4>
          <p>Some text p</p>
          <p>Some text p</p>
        </div>
        <a href="#" class="btn btn-success launch-modal" data-modal-id="modal-register" data-img-url="img/1_mini.jpg" title="buy">BUY</a>
      </div>
...
...
...
</div>

También tengo una ventana modal, que se abre cuando el usuario hace clic en el botón "comprar", y necesito copiar y

Elementos desde "product-element-container" hasta la ventana modal.

Problema: no sé cómo crear una "selección" adecuada en jQuery que elija div con el botón presionado. ¿Cuál es la mejor manera de hacer esto?

1
Stepanov Vlad 12 may. 2016 a las 19:46

3 respuestas

La mejor respuesta

Esta es una implementación muy simple de lo que estás tratando de hacer:

$('a.launch-modal').click(function() {
    var content = $(this).siblings('.product-element-container').html();
    $('#modal-register').html(content);
});

Primero, agrega un detector de eventos al hacer clic en todos los elementos <a class="launch-modal">, la devolución de llamada (es decir, lo que sucede después de hacer clic) obtiene el contenido HTML del elemento <div class="product-element-container"> correspondiente y lo coloca en el {{X2} }

0
waffle 12 may. 2016 a las 17:21

Puede usar $(this).siblings('.product-element-container') dentro de la función de devolución de llamada de evento de clic de botón.

0
Uzbekjon 12 may. 2016 a las 16:50

Primero dé clases a h4 y sus etiquetas p dentro del contenedor que desea copiar.

En segundo lugar, agregue un atributo como data- btnId = "button id here" al botón.

El siguiente programa de arranque tiene un evento en modal abierto show.bs.modal y shown.bs.modal que se activa al abrir y después de que modal se muestre en la página, respectivamente.

   $( '#your modal id" ).on
    ('show.bs.modal' , function
    (event) {
    var button =
    $(event.relatedTarget) //  Button that triggered the modal
     var recipient = button.data
   ('btn id here which is inside container' ) //   Extract info  from data-* attributes

    var modal = $( this)
    modal.find( "h4").text( receipt.   parent(".    containerClassNameHereWhoseContentToBeCopied").   find("h4.classNameOfH4TagHereWhich.   IsInsideContainer).text());

    // Do same for P tags.
 })

Nota * su modal debe tener etiquetas h4 y p. O puede poner valores / texto a cualquier etiqueta.

0
Anil Panwar 12 may. 2016 a las 17:24