动态创建 class names.OnlyJS

Question

var i = 0;

function Myfunc() {
    var newdiv = document.createElement('div');
    var el = document.createElement('div');
    var dynamicClass = "x" + i;
    i++;
    el.setAttribute('class', dynamicClass);
    var c = document.getElementsByClassName(dynamicClass);
    newdiv.appendChild(ele);
    for (var j = 0; j < c.length; j++) {
        c[j].appendChild(newdiv);
    }
}

<input type="hidden" value="0" id="nextValue">
<div class="x1">a...</div>
<div class="x2">b...</div>
<div class="x3">c...</div>
<input type="button" onclick="Myfunc()" />

我想在函数中动态创建 class 名称。根据我使用 Java 和 C 的经验，我希望每次按下按钮并触发函数来增加变量 i （也就是更改 class 的名称正如您将在下面看到的那样）并将变量 i 的值保留到内存中，以便下次再次触发该函数时可以进一步增加它。

function Myfunc(i) {
  var newdiv = document.createElement('div');
  var el = document.createElement('div');
  var dynamicClass = "x" + i;
  i++;
  el.setAttribute('class', dynamicClass); 
  var c = document.getElementsByClassName(dynamicClass);
  
  for(var j=0;j<c.length;j++){
   newdiv.appendChild(el);
  }
}

<div class="x1">a...</div>
<div class="x2">b...</div>

<div class="xn">c...</div>


<input type="button" onclick="Myfunc()"/>

变量i怎么会有以前的值呢？如果我的问题听起来微不足道，我是一名学生，但对 JS 的经验几乎为零。

Answer 1

Demo

使用隐藏元素存储增量的下一个值

 function Myfunc() {
   var block = document.getElementById('block');
   var newDiv = document.createElement('div');
   var nextValue=document.getElementById("nextValue").value;
    var dynamicClass="x" + nextValue;
   newDiv.setAttribute("id", dynamicClass); 
  newDiv.setAttribute("class", dynamicClass);
                 newDiv.innerHTML=dynamicClass;
      block.appendChild(newDiv);
     document.getElementById("nextValue").value=++nextValue;        
 }

<form action="" method="get" >
    <input type="hidden" value="0" id="nextValue" />
<div id="block">            
<div class="x1">a...</div>
<div class="x2">b...</div>
<div class="xn">c...</div>
</div>

<input type="button" onclick="Myfunc()"/>
</form>

Answer 2

您可以使用元素的属性：

function Myfunc() {
    var newdiv = document.getElementById('newDiv');
    var i = newdiv.getAttribute('ind');
    if(i === null) {
        i = 0;
    } else {
        i = parseInt(i, 10);
    }

    var el = document.createElement('div');
    var dynamicClass = "x" + i;
    i++;
    newdiv.setAttribute('ind', i);
    el.setAttribute('class', dynamicClass); 

    newdiv.appendChild(el);
}

<div id="newDiv">
<div class="x1">a...</div>
<div class="x2">b...</div>
<div class="xn">c...</div>
</div>
<input type="button" onclick="Myfunc()"/>

Answer 3

刚刚在按钮本身上添加了数据属性，并将 'this' 传递给函数调用以获取按钮。无需维护全局变量或其他隐藏元素：http://jsfiddle.net/h0cuLuty/1/

javascript:

 function Myfunc(obj) {
    var i=parseInt(obj.getAttribute('data'),10);
    var existing = document.getElementsByClassName('parent')[0];
    var el = document.createElement('div');
    var txt = document.createTextNode("x"+i);
    el.appendChild(txt);
    var dynamicClass = "x" + i;
    el.setAttribute('class',dynamicClass); 
    existing.appendChild(el);

    i++;
    obj.setAttribute('data',i);
}

HTML:

<div class="parent">
</div>

<input type="button" data="1" onclick="Myfunc(this)"/>

动态创建 class names.OnlyJS

Create dynamically class names.OnlyJS

html

javascript

javascript-events