0

Tengo un metodo con jquery donde descargo una imagen pero al momento de pasar a la siguiente imagen me sigue descargando la primera imagen ya no se que hacer

mi data la obtengo asi

    @foreach (var item in registros.OrderBy(m => m.Valor2))
    {
        <div>
            <div class="row mt-5">
                <div class="col-6">
                    <img id="item" src="@item.RutaAdjunto" style="height:80vh ; width:  min-content" class="card-img-top ml-auto" alt="...">
                </div>
                <div class="col-4 align-self-center">
                    <div class="container">
                        <h2 id="modalVariosTitulo" class="card-title">@item.Titulo</h2>
                        <p id="modalVariosFecha" class="text-info font-italic"></p>
                        <p id="modalVariosContenido" class="card-text text-justify">@item.Contenido</p>
                        <button type="button" [email protected] bool="@item.LikeTrue.ToString()" href="#" class="btnlike btn btn-success py-0"><i class="fas fa-thumbs-up"></i> <small class="likesnumber">@item.Likes</small></button>
                        <button type="button" bool="@item.DislikesTrue.ToString()" value="@item.Valor2" href="#" class="btndislike btn btn-danger py-0"><i class="fas fa-thumbs-down"></i> <small class="dislikesnumber">@item.Dislikes</small></button>
                        <button type="button" class=" btn btn-info py-0 btnDescargarAdjunto"><i class='fas fa-download'></i></button>
                    </div>
                </div>
            </div>
        </div>
    }

mi metodo de descarga que utilizo para poder descargar la imagen es asi

 **$(".btnDescargarAdjunto").click(function () {
            var data = document.getElementById("item").src;
            var ruta = data;
            var enlace = document.createElement('a');
            enlace.href = ruta;
            enlace.download = ruta;
            document.body.appendChild(enlace);
            enlace.click();
            //Borrrar el elemento
            enlace.parentNode.removeChild(enlace);
            //let fileName = getFileName(data);
            //saveAs(data, fileName);
        
            //function getFileName(str) {
            //    return str.substring(str.lastIndexOf('/') + 1)
            //}
        });**

1 respuesta 1

0

Modifica esto:

var data = document.getElementById("item").src;

por esto:

var data = $(this).parent().parent().parent().find('img').attr("src")

Explicación:

Si te fijas, veras que repites el id="item" en cada ciclo del bucle foreach, y por eso siempre te descargaba la primera imagen, pues los elementos deben tener un id único, y en tu caso lo repetias, por lo tanto al llamarlo siempre te cogia el primero.

Observando tu estructura de elementos, he visto que es asi:

<div>
  <div>
    <div>
      <img src="ruta de la imagen">
    </div>
    <div>
      <div>
        <h2></h2>
        <p></p>
        <p></p>
        <button>
          <i></i>
          <small></small>
        </button>
        <button>
          <i></i>
          <small></small>
        </button>
        <button class="btnDescargarAdjunto">
          <i></i>
        </button>
      </div>
    </div>
  </div>
</div>

Date cuenta que es una estructura de padres e hijos y hermanos, pues en HTML siempre son así internamente aunque lo indentes mal luego al escribirlo.

Si quitamos los hermanos que no nos interesan, la estructura queda asi:

<div>
  <div>
    <div>
      <img src="ruta de la imagen">
    </div>
    <div>
      <div>
        <button class="btnDescargarAdjunto">
          <i></i>
        </button>
      </div>
    </div>
  </div>
</div>

Teniendo esto claro, y usando las funciones de jquery relativas al desplazamiento en el arbol de elementos, vamos a usar algunas de ellas, como parent() (la cual sube el nivel al padre del elemento actual), find() (la cual busca un selector o elemento a partir del elemento actual) y tambien usaremos la función general de jquery attr para conseguir el valor del atributo src.

Con todo ello te he sugerido este cambio:

var data = $(this).parent().parent().parent().find('img').attr("src")

que pasamos a analizar sabiendo todo lo anterior y donde:

  • $(this) representa el elemento actual, el cual viene dado por la funcion click. Es decir, representa, dentro de todo el árbol, el botón pulsado y que tiene la clase btnDescargarAdjunto (que puede estar repetida en otros botones, pero tu solo has hecho el click en este concretamente).
  • parent() Una vez situados sobre el botón, subimos un nivel en el árbol con esta instrucción, para luego hacer un find, pero aun no es suficiente para ello, porque find solo busca sobre los descendientes del elemento que se aplica, y como queremos buscar img y aun se encuentra más arriba, seguimos subiendo con otro parent(), y lo mismo, aun no hemos llegado lo suficientemente arriba, por lo tanto necesitamos otro más, y volvemos a subir con parent() de nuevo. Ahora si, ya estamos lo suficientemente arriba para buscar el img y toca hacer el find.
  • find('img'). Esta función busca entre los descendientes del elemento actual (recuerda que hemos ido subiendo varios) un elemento img, el primero que encuentre, y si lo encuentra a continuación le vamos a sacar el valor de su atributo src que es lo que nos interesa saber. Por lo tanto la ultima función encadenada será:
  • attr('src') que nos devolvera el valor del atributo src que haya encontrado en el elemento actual (que a modo de resumen, y siento repetirlo tanto, es el que hemos ido subiendo 3 veces desde el boton y luego hemos descendido con find hasta encontrar el img).

Y ese valor lo asignamos a la variable data y ya está.

Espero que lo hayas entendido.

7
  • Si bro muchas gracias puedes explicarme por favor esto no he visto y estoy algo atorado quiero ver cursos algo asi me lo explicarias por favor. veo que me descarga el nombre con todo y ruta en la parte de enlace.download pero cuando intento cambiar me cambia de ruta tifff
    – user231333
    Commented el 20 feb. 2022 a las 23:14
  • para el nombre lo puse asi let arr = ruta.split('/'); let nameImg = arr.pop() enlace.download = nameImg;
    – user231333
    Commented el 20 feb. 2022 a las 23:25
  • No bro ya use el codigo comentado para el nombre si puedes explicarme lo que me dijiste gracias nuevamente
    – user231333
    Commented el 20 feb. 2022 a las 23:30
  • Acabo de actuializar mi respuesta con una extensa explicación, espero te sirva. Saludos!
    – masterguru
    Commented el 20 feb. 2022 a las 23:43
  • te agradezco mucho por tu ayuda. Saludos
    – user231333
    Commented el 2 mar. 2022 a las 2:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.