<div class="card" style>
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-
expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<!-- Add mx-auto -->
<div id="collapseOne" class="collapse show text-center mx-auto" aria-labelledby="headingOne"
style="width:300px;">
<div class="card-body">
<div class="card">
<div class="card-header text-center" id="headingTwo" style="width:300px;">
<h5 class="mb-0">
<button class="btn btn-link collapsed text-center" data- toggle="collapse" data-
target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width:300px;">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus wolf moon put a
craft beer sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings farm-
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data- target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry wolf moon
et. Nihil anim keffiyeh helvetica, craft beer labore wes sapiente ea proident. Ad vegan
</div>
</div>
</div>
</div>
您好，我一直在代码中复制并粘贴10-20次，更改ID，标题ID和按钮。我还一直在复制和粘贴一堆其他的html代码（大约20张图像的图像标签），我想知道是否有办法停止使用纯html css重复代码（如函数）。如果不能，您可以使用纯香草js做到吗？如果不是，那还有什么其他方法呢？
简而言之
最重要的问题（A最重要，C最少）
您可以使用一个函数来重复您要重复元素的次数，在以下代码段中，我创建了一个函数，该函数将.card使用克隆节点.cloneNode()并进行多次迭代，然后querySelector()在克隆的节点上使用修改ID和属性，此处是option的摘录A：
function duplicateElement(selector, numOfDuplicates) {
let element = document.querySelector(selector);
for(let i = numOfDuplicates; i > 0; i--) {
let newElement = element.cloneNode(true);
newElement.querySelector('#headingOne').id = `headingOne-${i}`;
newElement.querySelector('#collapseOne').id = `collapseOne-${i}`;
newElement.querySelector('#collapseTwo').id = `collapseTwo-${i}`;
newElement.querySelector('#headingTwo').id = `headingTwo-${i}`;
let toggleBtn = newElement.querySelector('[data-target="#collapseOne"]');
toggleBtn.dataset['target'] = `#collapseOne-${i}`;
toggleBtn.setAttribute('aria-controls', `collapseOne-${i}`);
let toggleBtn2 = newElement.querySelector('[data-target="#collapseTwo"]');
toggleBtn2.dataset['target'] = `#collapseTwo-${i}`;
toggleBtn2.setAttribute('aria-controls', `collapseTwo-${i}`);
element.after(newElement);
}
}
duplicateElement('.card', 4);<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria- expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<!-- Add mx-auto -->
<div id="collapseOne" class="collapse show text-center mx-auto" aria-labelledby="headingOne" style="width: 300px;">
<div class="card-body">
<div class="card">
<div class="card-header text-center" id="headingTwo" style="width: 300px;">
<h5 class="mb-0">
<button class="btn btn-link collapsed text-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width: 300px;">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus wolf moon put a craft beer sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings farm-
</div>
</div>
</div>
</div>
</div>
</div>如果您正在寻找选项C解决方案，那么如果您的项目尚未使用React或其他客户端渲染库或前端框架，则将有些复杂，您必须将Webpack与Babel结合使用以设置前端框架和代码-这是项目的基础，这是一个有效的codeandbox示例，说明如何使用React来实现bootstrap前端。
在以下代码段中，我创建了一个组件函数，并Array.map()在数组上[1, 2, 3, 4, 5]用于创建5个组件：
import React, { useState } from "react";
import { Collapse, Button, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
function Example() {
const [open, setOpen] = useState(false);
const [openLevel, setOpenLevel] = useState(false);
return (
<>
<Card>
<Card.Header>
<Button
onClick={() => setOpen(!open)}
aria-controls="collapseOne"
aria-expanded={open}
>
Collapsible Group Item #1
</Button>
</Card.Header>
<Collapse className="first-coll" in={open}>
<Card.Body id="collapseOne">
<Card>
<Card.Header>
<Button
onClick={() => setOpenLevel(!openLevel)}
aria-controls="collapseTwo"
aria-expanded={openLevel}
>
Collapsible Group Item #2
</Button>
</Card.Header>
<Collapse className="second-coll" in={openLevel}>
<Card.Body id="collapseTwo">
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus wolf moon put a craft beer sapiente ea proident. Ad
vegan excepteur butcher vice lomo. Leggings farm-
</Card.Body>
</Collapse>
</Card>
</Card.Body>
</Collapse>
</Card>
</>
);
}
export default function App() {
return (
<div className="App">
{[1, 2, 3, 4, 5].map((el, i) => {
return <Example key={i} />;
})}
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句