1

Buenas tardes compañeros, soy nuevo usando Spring Boot y necesito de su apoyo por favor.

Desde mi clase controlador(@Conroller) envió datos a mi Jsp y los datos se muestran correctamente, pero al dar clic en la etiqueta anchor- no me muestra el valor de la etiqueta con clase nameproduc al usar Jquery, y me muestra el valor del div que busco reemplazar; gracias ante todo.

        <div class="row">
            <div class="col-md-12 my-4 mt-md-3 mb-md-5">
                <div class="h4">Más Productos similares:</div>
            </div>
            <div class="col-12 col-md-12 bg-shad pt-4 pb-1">
                <div class="owl-carousel owl-theme text-center" id="gallery_01">
            <!-- me muestra 12 grupos similares: -->
                    <c:forEach items="${producto}" var="producto">  
                        <a href="#" class="selecproduct item thumb-wrapper text-decoration-none" data-image="${urlPublic}/imagenes/frutas/${producto.proimagen}" data-zoom-image="${urlPublic}/imagenes/frutas/${producto.proimagen}">
                            <div class="border rounded" >
                                <img src="${urlPublic}/imagenes/frutas/${producto.proimagen}" alt="" class="">
                                <div class="nameproduc">${producto.nomProducto}</div>
                                <span class="precioproduct">${producto.precio}</span>
                                <div class="d-none">${producto.dataFilPro}</div>
                            </div>
                        </a>
                    </c:forEach>
                </div>
            </div>
        </div>

 <script>
$(".selecproduct").click(function(){
        var nombPro = $(".nameproduc").html();
        alert(nombPro);
    });

1 respuesta 1

1

No me había dado cuenta de que el div está dentro del enlace.

  • Dentro de la función $(this) hace referencia al enlace en que se hizo clic
  • Solo necesitas usarlo para encontrar el resto de elementos con $(this).find('.clase')

$(".selecproduct").click(function(){
    // Encontrar elemento con clase nameproduc desde el enlace
    let nombPro = $(this).find('.nameproduc').html();
    alert(nombPro);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
            <div class="col-md-12 my-4 mt-md-3 mb-md-5">
                <div class="h4">Más Productos similares:</div>
            </div>
            <div class="col-12 col-md-12 bg-shad pt-4 pb-1">
                <div class="owl-carousel owl-theme text-center" id="gallery_01">
            <!-- me muestra 12 grupos similares: -->
                        <a href="#" class="selecproduct item thumb-wrapper text-decoration-none">
                            <div class="border rounded" >
                                <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="" class="">
                                <div class="nameproduc">Airplane</div>
                                <span class="precioproduct">123</span>
                                <div class="d-none">Filtro 1</div>
                            </div>
                        </a>
                        <a href="#" class="selecproduct item thumb-wrapper text-decoration-none">
                            <div class="border rounded" >
                                <img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="" class="">
                                <div class="nameproduc">Girl</div>
                                <span class="precioproduct">456</span>
                                <div class="d-none">Filtro 2</div>
                            </div>
                        </a>
                </div>
            </div>
        </div>

1
  • Gracias por compartir tus conocimientos, ya que obtengo el resultado que buscaba. No había visto el método find(), muchas gracias.
    – APRECode
    Commented el 26 ago. 2020 a las 0:55

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.