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()" />

我想在函数中创建动态类名。根据我对Java和C的经验，我希望每次按下按钮，我都会触发函数来对变量 i 进行icrease（也就是更改类的名称，如下所示）并保留值变量 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

使用隐藏元素存储增量的nextValue

 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

只需在按钮上添加数据属性，并将'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)"/>

Answer 3

您可以使用元素的属性：

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()"/>

创建动态类名.OnlyJS

3 个答案: