Question

我使用以下代码在网页上创建手风琴元素：

document.getElementById('accordeon1').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content1"></h2><p class="content1"></p></li></ul></div>'

document.getElementById('accordeon2').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content2"></h2><p class="content2"></p></li></ul></div>'

document.getElementById('accordeon3').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content3"></h2><p class="content3"></p></li></ul></div>'

...

document.getElementById('accordeon50').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content50"></h2><p class="content50"></p></li></ul></div>'

...有人可以帮助我简化代码吗？非常感谢！

Answer 1

这种问题对于堆栈溢出并不是很好。它是基于意见的，而且范围很广。当您可以更具体地了解要执行的操作时，Stackoverflow效果最佳。尽管我会回答这个问题，但我也认为应该将其关闭。

这不是很棒的代码，也不是很好的代码，但是它确实向您展示了一种可以重构它的方式：

const makeAkkordeonElement = numberIn => `<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content${numberIn}"></h2><p class="content${numberIn}"></p></li></ul></div>`

for (let i = 0; i < 100; i++) {
  const el = document.getElementById(`accordeon${i}`)

  el && (el.innerHTML += makeAkkordeonElement(i))
}

<div id="accordeon1"></div>
<div id="accordeon2"></div>
<div id="accordeon50"></div>
<div id="accordeon99"></div>

Answer 2

使用jQuery ...由于该问题已被标记。

您可以寻找attribute selector并获得id的“独特”部分。

我同意@OliverRadini关于您问题的«基于观点的且相当广泛的»方面的意见。我认为您的问题的开始应该是在动态内容上正确使用类。肯定会以一些评论说“阅读教程并尝试！”结束。

因为这样做的原因是一个可以被问到的问题...

无论如何，这是一个使用jQuery循环的示例。但这肯定是不好的代码。

$("[id^='accordeon']").each(function(){
  var unique = $(this).attr("id").substr(9);
  //console.log(unique);
  $(this).html('<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content'+unique+'"></h2><p class="content'+unique+'">TEXT HERE?</p></li></ul></div>');
});

p.content1{
  color:blue;
}
p.content2{
  color:red;
}
p.content3{
  color:green;
}
p.content4{
  color:yellow;
}
p.content5{
  color:cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="accordeon1">accordeon #1</div>
<div id="accordeon2">accordeon #2</div>
<div id="accordeon3">accordeon #3</div>
<div id="accordeon4">accordeon #4</div>
<div id="accordeon5">accordeon #5</div>

如何简化此代码（通过使用循环？）

2 个答案: