搜尋

首頁  >  問答  >  主體

javascript - 关于JS插入元素节点并给class赋值问题，请大神帮助。

我想要的效果是，点击添加按钮给指定的UL里添加LI。并按条件给其赋值；
现在遇到的问题是：点击插入按钮时，插入的第一个LI没有按条件给class赋值；求大神帮助；谢谢哈。
以下是我的代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

<code><!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            .va11{

                width: 300px;

                height: 45px;

                background-color: #004488;

                color: #FFFFFF;

                line-height: 45px;

                padding-left: 10px;

                margin-bottom: 0px;

                 

            }

            .va12{

                width: 300px;

                height: 45px;

                background-color:#001133;

                color: #FFFFFF;   

                line-height: 45px;

                padding-left: 10px;   

                margin-bottom: 0px;       

            }

        </style>

        <script>

         window.onload = function(){

             var op_1 = document.getElementById('od2');

             var oul_1 = op_1.getElementsByTagName('ul')[0];

             var oa1_1 = oul_1.getElementsByTagName('a');

             //-----

             var obat_1 = document.getElementById('inbut');

             var otext_1 = document.getElementById('intxt');

             //---

             //点击按钮插件一个LI，并跟据条件给class赋值

             obat_1.onclick = function(){

                 var oli_1 = document.createElement('li');

                 var oli_2 = oul_1.getElementsByTagName('li');

                 oli_1.innerHTML=otext_1.value + '<a  href="javascript:;">删除</a>';

                 //

                 if(oli_2.length>0){

                     oul_1.insertBefore(oli_1, oli_2[0]);

                     //判断li%2的值是否为0，然后插入相应的className

                     for(var i=0;i<oli_2.length;i++){

                         if(i%2 === 0){

                             oli_1.className = 'va12';

                         }

                         else{

                             oli_1.className = 'va11';

                         }

                     };   

                 }

                 else{

                     oul_1.appendChild(oli_1);

                 }

                  

                 //点击删除添加的LI

                 for(var i=0;i<oa1_1.length;i++){

                      oa1_1[i].onclick = function(){

                     alert('删除测试');

                     oul_1.removeChild(this.parentNode);

                      }

                      };

             };

         }

        </script>

    </head>

    <body>

        <input type="text" value="这里输入文字" id="intxt" />

        <input type="button" value="添加内容" id="inbut" />

         

        <p id="od2">

            <ul>

                 

            </ul>

        </p>

    </body>

</html></code>

PHP中文网PHP中文网2895 天前394

全部回覆(3)我來回復

  • 迷茫

    迷茫2017-04-10 17:35:54

    第一次单击时oli_2.length为0，不走if(oli_2.length>0)里面，因此li附class的代码没有执行到，所以第一个li没有样式，而后面加进来的li可以执行到，所以后来的li样式应用上了。
    你的代码除了命名不规范外，还有一个问题：就是你在每次单击时都去遍历已经添加进来的所有li（oli_2），然后根据奇偶去附Class，这样在数量多的时候势必造成性能问题。我的解决办法每次给新加进来的有且只有一个li附class。
    只需把你的这段代码改成下面的即可：

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <code>

                        if(oli_2.length>0){

                             oul_1.insertBefore(oli_1, oli_2[0]);

                             //判断li%2的值是否为0，然后插入相应的className

                             for(var i=0;i<oli_2.length;i++){

                                 if(i%2 === 0){

                                     oli_1.className = 'va12';

                                 }

                                 else{

                                     oli_1.className = 'va11';

                                 }

                             };   

                         }

                         else{

                             oul_1.appendChild(oli_1);

                         }

    </code>

    1

    2

    3

    4

    <code>                 oul_1.appendChild(oli_1);

                     var len = oli_2.length - 1;

                     oli_1.className = len % 2 === 0 ? 'va12' : 'va11';

    </code>

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-10 17:35:54

    第一次点击时，oli_2先查找li，oli_2.length===0，后面oli_1被append，这时才oli_2.length>0。

    代码可读性有点差，建议变量命名更语义化一点。

    回覆
    0
  • 高洛峰

    高洛峰2017-04-10 17:35:54

    1

    2

    3

    4

    <code>else{

                         oul_1.appendChild(oli_1);

                          oli_1.className = 'va12';  //少了这一句

                     }</code>

    回覆
    0
  • 取消回覆