Question

我是JS的新手，由于某种原因，我不能为我的生活得到一个简单的按钮来添加一个类到我的链接。我已经尝试了一些我在这里看过的不同方法，但我什么都没得到。我很尴尬地说我已经在这里待了大约2个小时。我不想使用jQuery，因为我想学习JS，所以如果你能用原始JavaScript提供答案并解释你的答案，我将不胜感激。谢谢。

HTML：

<div class='col-9 text-right'>
    <ul class='navlinks'>
        <li>Home</li>
        <li>Blog</li>
        <li>About</li>
        <li>Contact</li>

    </ul>
    <p class='cheesebrgr'>click</p>
</div>

JS：

    var fries = function () {
       var milkshake = document.getElementsByTagName(' li ');
        for (i = 0; i < milkshake.length; i++); {
            milkshake[i].classList.add('op1');
        }   
    };
    var napkin = document.getElementsByClassName('cheesebrgr');
    napkin.addEventListener('click', fries);

**只是读了两个类似的问题而没有运气。

Answer 1

您的代码中存在几个问题

document.getElementsByClassName()返回一个列表，因此您必须迭代以附加事件侦听器
您错位;并终止for循环

代码的

for (i = 0; i < milkshake.length; i++); //<//misplace semi-colon end of for loop

＆＃13;

var fries = function() {
  var milkshake = document.getElementsByTagName('li');
  for (var i = 0; i < milkshake.length; i++) {
    milkshake[i].classList.add('op1');
  }
};
var napkin = document.getElementsByClassName('cheesebrgr');
napkin[0].addEventListener('click', fries);

//If you single element with cheesebrgr class
//var napkin2 = document.querySelector('.cheesebrgr');
//napkin2.addEventListener('click', fries);

＆＃13;

.op1 {
  color: red;
}

＆＃13;

<div class='col-9 text-right'>
    <ul class='navlinks'>
        <li>Home</li>
        <li>Blog</li>
        <li>About</li>
        <li>Contact</li>

    </ul>
    <p class='cheesebrgr'>click</p>
</div>

＆＃13;

JavaScript classList不起作用。我尝试过各种各样的方法

1 个答案: