简体   繁体   English

JS什么也没做……试图改变一个类<ul><li>

[英]JS does nothing… trying to change a class in a <ul> <li>

I can't get anything to change the "class" attribute with JS... I've searched for several hours, can't see anything else to try.... here's the source: (note I'm doing this on my laptop, locally... 我什么都无法用JS来更改“ class”属性。我已经搜索了几个小时,看不到其他可以尝试的内容。...这是来源:(请注意,我正在这样做我的笔记本电脑,本地...

   <html>
    <head>
        <title>jS chg class</title>
    </head>
    <script>
    var listitems = document.getElementsByTagName("li");
    for (int i = 0; i < listitems.length; i++)
     {
      if (listitems[i].className == "trash")
      {
       listitems[i].className = "keep";
       break;
      }
    }
    </script>
    <body>


        <div id="junk">


            <span id="categorylabel">Closet Junk:</span>
            <ul id="junklist">
                <li class="trash">books</li>
                <li class="trash">shoes</li>
                <li class="trash">clothes</li>
            </ul>
            </div>
    </body>
     </html>

use var instead of int in the for loop like this: 在这样的for循环中使用var而不是int

var listitems = document.getElementsByTagName("li");
for (var i = 0; i < listitems.length; i++) {
  if (listitems[i].className == "trash") {console.log("sdfg")
     listitems[i].className = "keep";
     break;
  }
}

Here is the jsFiddle 这是jsFiddle

You must apply Javascript after document is ready. 准备好文档后,您必须应用Javascript。

Try this: 尝试这个:

(function() {
    ...
    your script
    ...
})();

Here is the jsfiddle 这是jsfiddle

as gurvinder372 comment... put <script> tags to end of <body> 's bottom. 作为gurvinder372注释...将<script>标记放在<body>底部的末尾。

and. 和。 Thinker's answer (change int to var in your for loop) 思想者的答案(在for循环中将int更改为var

<html>
  <head>
    <title>jS chg class</title>
  </head>
  <style>
    .trash { color : red; }
  </style>
<body>

<div id="junk">
  <span id="categorylabel">Closet Junk:</span>
  <ul id="junklist">
      <li class="trash">books</li>
      <li class="trash">shoes</li>
      <li class="trash">clothes</li>
  </ul>
</div>

<script> ///// HERE
  var listitems = document.getElementsByTagName("li");
  for (var i = 0; i < listitems.length; i++) // and HERE
  {
    if (listitems[i].className == "trash")
    {
      listitems[i].className = "keep";
      break;
    }
  }
</script>

</body>
</html>

Here are the following issues. 这是以下问题。

  1. You have put the js inside head tag. 您已将js放在head标签内。 When this will be parsed there wont be any DOM element li . 当将对此进行解析时,将不会有任何DOM元素li If you want to keep it inside head put it inside window.onload 如果要将其保留在head请将其放在window.onload

  2. Like java there is no variable type declaration in javascript. 像Java一样,javascript中没有变量类型声明。 All variables of any type be it string or number or anything else is declared using var keyword 使用var关键字声明任何类型的所有变量,无论是字符串,数字还是其他任何变量

  3. When you are using the break keyword, your logic will only match the first element and will come out of the loop. 当您使用break关键字时,您的逻辑将仅匹配第一个元素,并且将退出循环。 So you may need to remove the break keyword 因此,您可能需要删除break关键字

Check this snippet 检查此片段

var listitems = document.getElementsByTagName("li");
    for (var i = 0; i < listitems.length; i++){
      if (listitems[i].className == "trash")
      {
       listitems[i].className = "keep";
       //break;
      }
    }

JSFIDDLE 的jsfiddle

Note: Un-comment break in the jsfiddle to replicate the issue 注意:取消注释在jsfiddle中复制问题

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM