当下拉值更改价格时,还更改了表中的要价和大小

时间:2018-10-25 07:09:35

标签: javascript jquery html css

当下拉列表的值更改为Price时,想在Tabel innerHTML的顶部添加行运行时。价格也要像Table amazone一样更改Table。中的Want Price和size:

https://www.amazon.com/Calvin-Klein-Womens-Printed-Sleeve/dp/B07621LRN6/ref=br_asw_pdt-8?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=&pf_rd_r=HWQ3TASK6QW286D8CV65&pf_rd_t=36701&pf_rd_p=913206c3-eb35-4cfe-a4c8-6c0b0a5ce93b&pf_rd_i=desktop

选择尺寸小,大,XL,XLL

每个人都有不同的价格,我想在网站顶部添加表格,表格的大小和行数都加一,如果下拉列表中有四个值,则价格会四倍变化并创建四行 我正在尝试使用异步功能 代码如下:

function() {
function fireEvent(element, event) {
    if (document.createEventObject) {
        var evt = document.createEventObject();
        return element.fireEvent('on'+event, evt);
    } else {
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent(event, true, true);
        return !element.dispatchEvent(evt);
    }
}

var prices = [];
var inclSizes = [];
var siteURLs = [];


var createTable = () => {
    var newTable="<table>";
    siteURLs.forEach(function(wid,i){
        var line="<tr>";
        line+="<td>"+siteURLs[i]+"</td>";
        line+="<td>"+inclSizes[i]+"</td>";
        line+="<td>"+inclSizes[i]+"</td>";

        line+="</tr>";
        newTable+=line;
    });
    newTable+="</table>";
    document.body.insertAdjacentHTML('afterbegin', newTable);
    return true;
};

var getData = ({cushionPromiseResolve,inclSize}) => {
    var prices = document.querySelector('span[id="priceblock_ourprice"]');
    siteURLs.push('https://www.amazon.com/');
    inclSize?inclSizes.push(inclSize):inclSizes('N/A')
    prices ? prices.push(prices.textContent) : prices.push('N/A');

    if (cushionPromiseResolve) {
        cushionPromiseResolve();
    }
};

async function sizeVariations() {
    var sizeVariations = document.querySelector('span[id="dropdown_selected_size_name"] span[class="a-dropdown-prompt"]');
        if (sizeVariations.textContent=== 'Select') {
            for (var i=0; i < sizeVariations.options.length; i++) {
                if (sizeVariations.options[i].value === '') {
                    getData({ inclSize: 'False'});
                    continue;
                }
                sizeVariations.selectedIndex = i;
                fireEvent(sizeVariations, 'change');
                await new Promise(function(resolve, reject){
                 setTimeout(function() {
                     getData({cushionPromiseResolve: resolve, inclSize: 'True'});
                 }, 1500);
                });
            }
        }

    return createTable();
}

return sizeVariations();

}

0 个答案:

没有答案