He creado una página web con los resultados del automóvil a partir de la consulta (para fines escolares).
Los resultados son algo así: (depende de la entrada del usuario ofc)
HACER | MODELO | AÑO | TIPO | IMAGEN
Audi | A4 | 2017 | Sedán | Enlace
Audi | S8 | 2016 | Sedán | Enlace
Me gustaría que se mostrara una imagen cuando se hace clic en el enlace, pero para realizar una consulta necesito el valor de la marca, el modelo y el año de esta fila. En mi código, estos divs contienen datos de autos
$(".result-item").append('<div class="value v-make">' + car.make + '</div>'); $(".result-item").append('<div class="value v-model">' + car.model + '</div>'); $(".result-item").append('<div class="value v-year">' + car.year + '</div>'); $(".result-item").append('<div class="value v-type">' + car.type + '</div>'); $(".result-item").append('<div class="value image-link"><a onclick="loadImg()">click</a></div>'); Y la función de obtener la imagen es
Mostrar resultado en console.log() es temporal
function loadImg() { var make, model, year; const settings = { "async": true, "crossDomain": true, "url": "https://bing-image-search1.p.rapidapi.com/images/search?q=" + make + "%20" + model + "%20" + year + "&count=1&mkt=pl-PL", "method": "GET", "headers": { "x-rapidapi-host": "bing-image-search1.p.rapidapi.com", "x-rapidapi-key": "*key*" } }; $.ajax(settings).done(function (response) { console.log(response); }); } ¿Cómo obtengo el valor de estos divs para ponerlo en variables en loadImg() ?
Considere el siguiente ejemplo.
$(function() { function getCarImage(make, model, year) { $.ajax({ async: true, crossDomain: true, url: "https://bing-image-search1.p.rapidapi.com/images/search", data: { q: make + " " + model + " " + year, count: 1, mkt: "pl-PL" }, method: "GET", header: { "x-rapidapi-host": "bing-image-search1.p.rapidapi.com", "x-rapidapi-key": "*key*" }, success: function(results) { console.log(results); } }); } $("table tbody a").click(function(event) { event.preventDefault(); var $self = $(this); var $row = $self.closest("tr"); getCarImage($(".make", $row).text(), $(".model", $row).text(), $(".year", $row).text()); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>MAKE</th> <th>MODEL</th> <th>YEAR</th> <th>TYPE</th> <th>IMAGE</th> </tr> </thead> <tbody> <tr> <td class="make">Audi</td> <td class="model">A4</td> <td class="year">2017</td> <td class="type">Sedan</td> <td><a href="#" class="getImage">Img Link</a></td> </tr> <tr> <td class="make">Audi</td> <td class="model">S8</td> <td class="year">2016</td> <td class="type">Sedan</td> <td><a href="#" class="getImage">Img Link</a> </tr> </tbody> </table>Esto vincula un evento de clic a cada elemento A en las filas. Cuando se hace clic, recopila todos los detalles y los pasa a la función.
En primer lugar, evite el onclick pasado como cadena en el HTML y use la escucha de eventos adecuada; de esta forma ya deberías tener todos los datos que necesitas en el cierre.
for (const car in cars) { const link = document.createElement('a'); link.innerText = 'click'; link.addEventListener('click', () => { // use car.make, car.year and so on }); $(".result-item").append(link); }