Question

我需要使用modulo和ternary运算符为HTML显示中的每个段落插入“odd”或“even”的类属性。我提取了段落元素，但我不确定如何在三元运算符中插入类和单词代码。我知道我的代码非常糟糕，但任何提示或建议都会很棒。

function oddEven()
{
    var parArray= document.getElementsByTagName("p");

    for(var i=0; i<parArray.length; i++)
    {
        (parArray % 2== 0)? parArray=="even" : parArray=="odd"; 
    }
    //end of oddEven()    
}

Answer 1

使用CSS很容易完成，但是如果你想学习JS，那么只需要做最少的修改就可以了解你的例子：

function oddEven() {
  var parArray = document.getElementsByTagName("p");

  for (var i = 0; i < parArray.length; i++) {
    parArray[i].classList.add((i % 2 == 0) ? "even" : "odd");
  }
  //end of oddEven()    
}

因此，对于奇偶校验，您需要检查i的值，而不是parArray，并指定一个类名，我使用classList，但您可以使用{{ 1}}等...

现场观看：

＆＃13;

className

＆＃13;

function oddEven() {
  var parArray = document.getElementsByTagName("p");

  for (var i = 0; i < parArray.length; i++) {
    parArray[i].classList.add((i % 2 == 0) ? "even" : "odd");
  }
  //end of oddEven()    
}

oddEven();

＆＃13;

.odd {color: blue}
.even {color: green}

＆＃13;

Answer 2

function oddEven() {
    var i, elements = document.getElementsByTagName("p");
    for(i = 0; i < elements.length; i += 1) {
       elements[i].className = i % 2 === 0 ? "even" : "odd";
    }
}

您也可以直接使用CSS而不使用任何JavaScript：

p:nth-child(even) {
    background: #00ff00;
}
p:nth-child(odd) {
    background: #ff0000;
}

这仅适用于p共享父母的情况。

Answer 3

你的功能没有机会工作。您正在正确选择p元素，但getElementsByTagName返回一个p元素数组，因此parArray ==“even”您试图将对象Array与String进行比较。请查看下面的代码并与您的代码进行比较。

我建议你阅读Change an element's class with JavaScript

    function oddEven()
    {
        var parArray = document.getElementsByTagName("p");
        var pElement;
        var i;

        for (i = 0; i < parArray.length; i++)
        {
            pElement = parArray[i];
            pElement.className += (i % 2) ? 'odd' : 'even';
        }
    }

Mod功能奇数偶数

3 个答案: