HtmljavaScript//要求1:点击获取所有规格按钮 把所有内存文本内容放入 文本框中
时间: 2023-12-07 11:02:43 浏览: 107
好的,以下是 HTML 和 JavaScript 实现代码:
```html
<div id="specs">
<div class="spec">
<span class="memory">8GB</span>
<span class="storage">256GB</span>
<button>选择</button>
</div>
<div class="spec">
<span class="memory">16GB</span>
<span class="storage">512GB</span>
<button>选择</button>
</div>
<div class="spec">
<span class="memory">32GB</span>
<span class="storage">1TB</span>
<button>选择</button>
</div>
</div>
<textarea id="memory-textarea"></textarea>
<script>
// 获取所有规格按钮
const specs = document.querySelectorAll('.spec');
// 获取文本框元素
const textarea = document.querySelector('#memory-textarea');
// 定义一个数组存储内存文本内容
const memories = [];
// 遍历所有规格按钮,获取内存文本内容并存入数组
specs.forEach(spec => {
const memory = spec.querySelector('.memory').textContent;
memories.push(memory);
});
// 将数组转换为字符串,以换行符分隔
const text = memories.join('\n');
// 将字符串赋值给文本框
textarea.value = text;
</script>
```
其中,`#specs` 是规格按钮容器的 ID,`#memory-textarea` 是文本框的 ID。如果实际情况不同,请相应地修改代码。
注:上述代码假设规格按钮的 HTML 结构如下:
```html
<div class="spec">
<span class="memory">8GB</span>
<span class="storage">256GB</span>
<button>选择</button>
</div>
```
其中,`.memory` 是内存文本内容所在的元素类名,`.spec` 是规格按钮的类名。
阅读全文