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 动画不触发的问题。
相关内容
发表评论