如何设置未知数量的ID？

Question

I have the following code which loops through an array of an unknown length. I want to change the style of one of the paragraphs by JavaScript HTML DOM, and want to change it on one single paragraph. Right now the class name is demo2 but I want to set it to something like demo_x.

-for (x in c){
  tr
    td.icon
      .div
        img(src=c[x].companyLogo, width= '45px',style=' max-height=45px;')
      .div(style='padding-left:10px;')
        a(style='font-weight: 550; display:block;')=c[x].companyName
        a(style='display:block;')=c[x].companyDomain
    td
      span.demo1
      span.demo2
      span.less(style= 'color: #1d8bea;',onclick="toggleFunction()")
    //This script evaluates the array length, divides it into two arrays, and also does the show more/less effect.
    include ../public/javascripts/slice.pug
    td
      p(style='display: inline; color: #6e6e6e;') #{c[x].location.CountryCode}
      span , 
      a(style='display: inline;') #{c[x].location.State}
      span , 
      a(style='display: inline;') #{c[x].location.City}
    td
      p(style='color: #6e6e6e;') #{e[x]}
    td
      a  #{d[x]}
-}
script.
    function toggleFunction() {
        var t = document.getElementsByClassName("demo2");
        if (t.style.display === "none") {
            t.style.display = "inline";
        } else {
            t.style.display = "inline";
        }
    }

Answer 1

Use the for loop to set class each, like this:

- var c =  ['a', 'b', 'c'];


- for (var i = 0; i < c.length; i++) {
    div(class='row-'+c[i])
- }

Output:

<div class="row-a"></div>
<div class="row-b"></div>
<div class="row-c"></div>

Answer 2

I've understood your question.

You should use the "this" keyword: when the function is called by the onclick, you'll bring the whole DOM element where the "onclick" has been performed as "this".

In a nutshell:

function toggleFunction() {

        if (this.style.display === "none") {
            this.style.display = "inline";
        } else {
            this.style.display = "inline";
        }
    }