cm|€12，50；gt；13x19 cm，€12.50lt；/optiongt； lt；option id=quot；20x30namiddagquot； value=quot；Namiddag|20x30 cm|€22，50；gt；20x30 cm，€22.50lt；/optiongt；lt；option id=quot；30x45namiddagquot； value=quot；Namiddag|30x45 cm|€32，50；gt；30x45 cm，€32.50lt；/optiongt； lt；option class=quot；disabledquot； value=quot；disabledquot； disabled=quot；disabledquot；gt；Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen.， lt；/optiongt；lt；/selectgt；lt；select id=quot；Onderwegquot； name=quot；Onderwegquot； data-name=quot；Onderwegquot； class=quot；js-basic-singlequot； onChange=quot；selectedCommute(this)；quot；gt； 13x19underwegquot； value=quot；Onderweg|13x19 cm|€12，50；gt；13x19 cm，€12.50lt；/optiongt；lt；option id=quot；20x30onderwegquot； value=quot；Onderweg|20x30 cm|€22，50；gt；20x30 cm，€22.50lt；/optiongt；lt；option id=quot；30x45underwegquot； value=quot；Onderweg|30x45 cm|€32，50quot；gt；30x45 cm，€32.50lt；/optiongt； lt；option class=quot；disabledquot； value=quot；disabledquot； disabled=quot；disabledquot；gt；Wil je meer stuks of formaten va
n deze foto? Vermeld dit dan in de winkelwagen.， lt；/optiongt；lt；/selectgt；lt；div id=quot；output-selectionsquot；gt； lt；div class=quot；selected-optionquot； id=quot；output-selected-option-afternoonquot；gt；lt；/divgt； lt；div class=quot；selected-optionquot； id=quot；output-selected-option-commutequot；gt；lt；/divgt；lt；/divgt；电影后名生2.2 JavaScript 分析函数
当菜单的值发生变化时，onChange 事件会触发相应的 JavaScript 函数。这些函数会获取选中的值，并使用 split("|") 将其分割成数组，然后使用 join("<；/div>；<；div>；") 将元素数组包裹在 <
中，最后使用 innerHTML 将其插入到指定的输出容器中。function selectedAfternoon(element) { var text = element.options[element.selectedIndex].value； document.getElementById("；output-selected-option-afternoon"；).innerHTML = "；<；div>；"； text.split("；|"；).join("；<；/div>；<；div>；"；") "；<；/div>；"；"；}function selectedCommute(element) { var text = element.options[element.selectedIndex].value； document.getElementById("；output-selected-option-commute"；).innerHTML = "；<；div>；"； text.split(quot；|quot；).join(quot；lt；/divgt；lt；divgt；quot；) quot；lt；/divgt；quot；；}电影后图天
此代码可以成功将值属性（例如Namadidg|13x19 cm|€12，50）转换为：lt；divgt；Namiddaglt；/divgt；lt；divgt；13x19 cmlt；/divgt；lt；divgt；€12，50lt；/divgt；电影后微了
并插入到父级lt；divgt；中。3.解决方案：为最后一个div添加一个类
现在，我们的核心需求是为上面的动态生成lt；divgt；€12，50lt；/divgt；添加一个价格类。
3.1 核心技术：querySelector 和 :last-child
为了实现这个目标，我们需要两个关键的 JavaScript 和 CSS 特性：element.querySelector(selector)：这是一个 DOM 方法，它返回第一个与指定选择器匹配的内部元素。:last-child：这是一个 CSS 伪类选择器，用于匹配父元素的最后一个子元素。
结合这两个特性，我们可以写成 querySelector("div:last-child") 选择指定父元素下的最后一个 div 子元素。
3.3 修改后的JavaScript代码
将上述技术应用到我们的分析函数中：function selectedAfternoon(element) { var text = element.options[element.selectedIndex].value； var outputContainer = document.getElementById(quot；output-selected-option-afternoonquot；)； outputContainer.innerHTML = quot；lt；divgt；quot； text.split(quot；|quot；).join(quot；lt；/divgt；lt；divgt；quot；) quot；lt；/divgt；quot；； // 选择父容器的最后一个 div，添加 'price' outputContainer.querySelector(quot；div：last-childquot；).classList.add(quot；pricequot；)；} function selectedCommute(element) { var text = element.options[element.selectedIndex].value； var outputContainer = document.getElementById(quot；output-selected-option-commutequot；)； outputContainer.innerHTML = quot；lt；divgt；quot； text.split(quot；|quot；).join(quot；lt；/divgt；lt；divgt；quot；) quot；lt；/divgt；quot； // 选择容器的最后一个 div，并添加 'price'。 outputContainer.querySelector(quot；div：last-childquot；).classList.add(quot；pricequot；)；} 复制后登录
现在，当用户选择一个选项时，价格部分将被包裹在一个价格类中 lt；divgt；中，例如：lt；divgt；Namidglt；/divgt；lt；divgt；13x19 cmlt；/divgt；lt；div class=quot；pricequot；gt；€12，50lt；/divgt；登录后，复制3.4 CSS样式定义
为了验证价格类是否添加成功，我们可以为其定义一些简单的CSS样式。
.js-basic-single { width： 100；}.selected-option { display： flex； width： 100； margin-bottom： 1rem； flex-direction： row； justify-content： space-between； align-items： center；}.price { color： red； /* 价格文本以红色显示 */ font-weight： bold； /* 加粉 */} （复制后登录）4. 注意数据格式与最佳实践一致：确保 value 属性始终遵循相同的数据格式。分隔符），价格信息始终位于最后一个分隔符之后。
错误处理：在实际应用中，querySelector 可能返回 null（如果未找到匹配的元素）。虽然在这个例子中，我们知道 innerHTML 会生成一个 div，但更健壮的存储会更健壮的存储会手机 querySelector 的返回值：var lastDiv = outputContainer.querySelector("；div：last-child"；)；if (lastDiv) { lastDiv.classList.add("；price"；)；} 复制登录后
性能注意事项：对于非常频繁的 DOM 操作，直接使用 innerHTML 可能会导致浏览器重新解析和渲染整个子树，这在某些极端情况下可能会影响性能。如果性能成为瓶颈，您可以考虑使用 document.createElement() 和 appendChild() 来创建和添加元素。但是，对于本例中少量的元素，innerHTML 已经足够高效，而且代码也很简单。
如果有多个类似的下拉拉光和容器输出，您可以考虑 selectedAfternoon 和 selectedCommute 函数被重构为一个更通用的函数，并将目标 id 作为参数传递。
function handleSelection(element， outputId) { var text = element.options[element.selectedIndex].value； var outputContainer = document.getElementById(outputId)； outputContainer.innerHTML = ""；lt；divgt；""； text.split(""；|""；).join(""；lt；/divgt；""；) var lastDiv = outputContainer.querySelector(""；div：last-child"；)； if (lastDiv) { lastDiv.classList.add(""；price"；)； }}// HTML： onChange=""；handleSelection(this，'output-selected-option-afternoon')；""；这个后的图像5.总结
通过本教程，我们学习了如何结合 JavaScript 的 DOM 操作（querySelector、classList.add）和 CSS 的伪类选择器（:last-child），从而实现对 HTML 元素动态生成的精确控制。类的全部上求和）奠定了基础。掌握这些技能，你的前端开发将会更加灵活高效。
以上是 JavaScript 动态处理。掌握 CSS 动画触发：解决元素可见性改变时动画不播放的问题。解决元素可见性切换时 CSS 动画不触发的问题。
相关内容
发表评论
