Question

类内的值没有改变

2015-02-21

59

javascript html css

我想更改类内的值，但它没有改变这是我的代码 //html

<menu class="box">a</menu><menu class="box">b</menu><menu class="box">c</menu><menu class="box">d</menu>

//javascript

<script type="text/javascript">

var box = document.getElementsByClassName('box');
var after = ['html', 'css', 'js' , 'jquery']

for (i = 0; i < box.length; i++) {
  box[i].value = after[i];

}

Answer 1

要更改类名，请使用

var boxes = document.getElementsByClassName('box');
var after = ['html', 'css', 'js' , 'jquery']

for (i = 0; i < box.length; i++) {
  boxes[i].className = after[i];
}

来自 MDN Docs

这将为您提供

<menu class="html">a</menu><menu class="css">b</menu>
<menu class="js">c</menu><menu class="jquery">d</menu>

要更改每个元素的实际值，您可以使用 innerHtml

var boxes = document.getElementsByClassName('box');
var after = ['html', 'css', 'js' , 'jquery']

for (i = 0; i < box.length; i++) {
  boxes[i].innerHTML = after[i];
}

这将为您提供

<menu class="box">html</menu><menu class="box">css</menu>
<menu class="box">js</menu><menu class="box">jquery</menu>

Answer 2

var box = document.getElementsByClassName('box');
var after = ['html', 'css', 'js', 'jquery'];
var j = 2;
for (i = 0; i < box.length; i++) {

  $('.box:nth-child(' + j + ')').html(after[i]);
  var j = j + 1;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<menu class="box">a</menu>
<menu class="box">b</menu>
<menu class="box">c</menu>
<menu class="box">d</menu>

尝试一下