JS/jQuery如何读取指定HTML元素内容获取汽车行的品牌、型号、年份参数

方案1：渲染时直接传递参数（最简便） #

直接在渲染行元素的时候把对应参数传入loadImg函数，无需额外DOM查询：

1. 修改渲染代码：

$(".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>');
// 改动点：把车辆参数直接传入onclick调用
$(".result-item").append('<div class="value image-link"><a onclick="loadImg(\''+car.make+'\',\''+car.model+'\',\''+car.year+'\')">click</a></div>');

2. 修改loadImg函数接收参数：

function loadImg(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);
        // 后续可从response中提取图片链接完成渲染
    });
}

方案2：通过DOM遍历读取当前行数据 #

如果不想在渲染时硬编码参数，可以通过点击元素向上查找当前行，再读取对应字段内容：

1. 修改渲染代码，将当前点击元素传入函数：

// 改动点：把this传入onclick调用
$(".result-item").append('<div class="value image-link"><a onclick="loadImg(this)">click</a></div>');

2. 修改loadImg函数读取行内数据：

function loadImg(clickElem) {
    // 找到点击元素所属的整行容器
    const $currentRow = $(clickElem).closest('.result-item');
    // 读取当前行对应字段的文本内容
    const make = $currentRow.find('.v-make').text().trim();
    const model = $currentRow.find('.v-model').text().trim();
    const year = $currentRow.find('.v-year').text().trim();

    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);
    });
}

优化建议：使用事件委托替代行内onclick #

如果数据量较大，推荐用事件委托的方式绑定事件，无需为每个行元素单独写onclick属性，性能和可维护性更好：

1. 渲染时无需写onclick，给按钮加个标识类即可：

$(".result-item").append('<div class="value image-link"><a class="load-img-btn">click</a></div>');

2. 全局绑定事件监听：

$(document).on('click', '.load-img-btn', function() {
    const $currentRow = $(this).closest('.result-item');
    const make = $currentRow.find('.v-make').text().trim();
    const model = $currentRow.find('.v-model').text().trim();
    const year = $currentRow.find('.v-year').text().trim();

    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);
    });
})
// 原有loadImg函数可以直接删除

内容的提问来源于stack exchange，提问作者Dominik Czekański