en un div tengo una precarga de imagenes dinamicas traidas de mi base de datos.. Se despliegan aprox 10 imagenes, lo que yo tengo que hacer es que al seleccionar una imagen cualq, me lleve a otro div, y me muestre esa misma imagen con sus otros datos(que ya vienen dinamicamente desde la precarga de img anterior)
1) Mis imagenes las cargo en una funcion que utilizo ajax, esta funcion recorre mi metodo en backend, y me trae los datos que son : -Fabricante[i]-Articulo[i]-Descripcion[i]-Color[i]-RutaImagen[i].
2)Con estos datos, me armo la estructura con un append, en la cual forma de:
function ObtengoDatosYRutaFoto(NombreSeccion, NombreCategoria, NombreEstilo, NombreMarca, NumTalle) {
var dir = "ObtengoDatosConFoto";
$.ajax({
type: 'get',
url: api + dir + "?NombreSeccion=" + NombreSeccion + "&NombreCategoria=" + NombreCategoria + "&NombreEstilo=" + NombreEstilo + "&NombreMarca=" + NombreMarca + "&NumTalle=" + NumTalle,
success: function(datos) {
var d = datos;
for (var i = 0; i < d.length; i++) {
var img = d[i].Ruta;
var fabricante = d[i].Fabricante;
var articulo = d[i].Articulo;
var descripcion = d[i].Descripcion;
var color = d[i].Color;
var numero = d[i].Numero;
var interno = d[i].Interno;
$("#contenedor_busqueda").append('<div class="divConImg"><a href="#sugerencias_articulos"><img src=' + img + ' class="ClassImgDada" onClick="FuncionImagen()" data-rutaImg="' + img + '" data-Fab=' + fabricante + ' data-Art=' + articulo + ' data-Desc =' + descripcion + ' data-Color=' + color + ' data-Num=' + numero + ' data-Interno=' + interno + ' border="1" width="200px" height="200px"></a></div>');
}
},
error: function(xhr, textStatus, errorThrown) {
console.log(xhr);
console.log(textStatus);
console.log(errorThrown);
}
});
}
En este append, hice un href en el cual me lleva al div donde quiero que pasen los resultados, que seria, al apretar una imagen, me lleve al div #sugerencia_articulos, por eso adentro del href esta el img..Dentro de img, hice un -data-Fab -data-Art -data-Desc y -data-color, que en este caso los tengo para que despues yo los pueda tomar desde mi funcion que esta en OnClick llamada FuncionImagen(). Bien, esto por ahora funciona bien, me arma la estructura html en la cual me muestra la cantidad de imagenes derminadas!
Mi problema esta en que, en mi evento OnClick, estoy tratando de tomar el valor de la imagen seleccionada, para ello, utilizo esto:
function FuncionImagen() {
var articulo = $('img').attr('data-Art');
console.log(articulo);
}
Quiero aclarar que en este metodo, solamente estoy probando con uno de los datos, para que no se torne tan largo, igualmente una ves que salga con este, va a salir con los demas, por eso solo utilizo 'articulo'
Obviamente que aca es donde esta mi problema, no se como hacer para poder tomar los datos de la imagen seleccionada... Tengo un console.log en el cual me mostraria el valor de Articulo, tomado al hacer click.. El resultado que me da es el Articulo, de la imagen que me aparece en la primer posicion! Quiero decir, que a mi se me despliegan 10 imagenes, y yo le doy click a la cuarta imagen, el resultado que me da es el Articulo de la primer imagen que aparece.. NO de la que yo le doy click!
Que me faltaria en este evento de OnClick para poder tomar la imagen seleccionada? Por favor llevo trancado con esto hace 2 dias :(