JavaScript 实现SKU选择功能:动态更新库存和价格
document.addEventListener('DOMContentLoaded', function() {\n const skuButtons = document.querySelectorAll('.sku-btn');\n\n skuButtons.forEach(button => {\n button.addEventListener('change', () => {\n const selectedSku = document.querySelector('input[name="skus"]:checked');\n selectedSku.classList.add("active");\n const otherSkus = document.querySelectorAll('input[name="skus"]:not(:checked)');\n otherSkus.forEach(sku => {\n sku.classList.remove("active");\n });\n \n const stock = selectedSku.parentElement.dataset.stock;\n const skuPrice = selectedSku.parentElement.dataset.price;\n const stockElement = document.querySelector('.list-group-item .stock');\n stockElement.textContent = '库存:' + stock + '件';\n\n const priceElement = document.querySelector('.list-group-item .price');\n priceElement.textContent = skuPrice ;\n });\n });\n\n});
原文地址: https://www.cveoy.top/t/topic/pXLH 著作权归作者所有。请勿转载和采集!