//- 下面是 pug 结构，我正在尝试对其进行迭代。
ul(class="mFAC_")
li
span(class="iconWrapper_ twitter_")
svg(viewBox="0 0 24 24")
use(xlink:href="#twitterIcon")
span(id="total-" + keyword_kid, class="mMC_")
li
span(class="iconWrapper_")
svg(viewBox="0 0 24 24")
use(xlink:href="#faceBookIcon")
span(id="total-" + keyword_kid, class="mMC_")
li
span(class="iconWrapper_")
svg(viewBox="0 0 24 24")
use(xlink:href="#linkedInIcon")
span(id="total-" + keyword_kid, class="mMC_")
li
span(class="iconWrapper_")
svg(viewBox="0 0 24 24")
use(xlink:href="#youTubeIcon")
span(id="total-" + keyword_kid, class="mMC_")
li
span(class="iconWrapper_")
svg(viewBox="0 0 24 24")
use(xlink:href="#pintrestIcon")
span(id="total-" + keyword_kid, class="mMC_")
li
span(class="iconWrapper_")
svg(viewBox="0 0 24 24")
use(xlink:href="#InstagramIcon")
span(id="total-" + keyword_kid, class="mMC_")
li
span(class="iconWrapper_")
svg(viewBox="0 0 24 24")
use(xlink:href="#tumBlrIcon")
span(id="total-" + keyword_kid, class="mMC_")
//- 我试图获得如下所示的输出，但徒劳无功。
- var iSource = [
- '#twitterIcon',
- '#faceBookIcon',
- '#linkedInIcon',
- '#youTubeIcon',
- '#InstagramIcon',
- '#tumBlrIcon'
-]
- var iconId = each in iSource;
- var svgUseTag = "<use xlink:href="+ iconId +">";
- var svgTag = "<svg viewBox='0 0 24 24'>"+ svgUseTag +"<svg>";
- var IconWrapper = "<span class='iconWrapper_' >"+ svgTag +"<span>";
- var countNuM = "<spanid='total-'" + keyword_kid +" class='mMC_'>";
- var formatter = [
- IconWrapper
- svgTag
- svgUseTag
- countNuM
- ]
ul(class="mFAC_")
each value in formatter
li = value
我是设计师而不是开发人员，但我认为自己是 javascript 的新手，所以想在哈巴狗中实现这一点请帮助我。
最佳答案
它更简单。应该这样做:
- var keyword_kid = 1;
- var iSource = ['#twitterIcon', '#faceBookIcon', '#linkedInIcon', '#youTubeIcon', '#InstagramIcon', '#tumBlrIcon'];
ul(class="mFAC_")
each item in iSource
li
span(class="iconWrapper_")
svg(viewBox="0 0 24 24", xlink:href=item)
use(xlink:href=item)
span(id="total-" + keyword_kid, class="mMC_")
关于javascript - PUG迭代成为挑战，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57919675/