PUG迭代成为挑战

Question

//- 下面是哈巴狗结构，我正在尝试对其进行迭代。

    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   =   "&lt;use xlink:href="+ iconId +"&gt;";
    -   var svgTag =  "&lt;svg viewBox='0 0 24 24'&gt;"+ svgUseTag +"&lt;svg&gt;";
    -   var IconWrapper = "&lt;span class='iconWrapper_' &gt;"+ svgTag +"&lt;span&gt;";
    -   var countNuM    = "&lt;spanid='total-'" + keyword_kid +" class='mMC_'&gt;";

    -   var formatter = [
    -           IconWrapper
    -               svgTag
    -                   svgUseTag
    -           countNuM
    -   ]

    ul(class="mFAC_")
        each value in formatter
            li = value

我是设计师而不是开发人员，但我想在哈巴狗中实现这一目标，请帮助我，因为我认为自己是 javascript 的新手。

Answer 1

更简单。应该这样做：

- 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_")

PUG迭代成为挑战

PUG iteration has become a challenge

javascript

pug