JavaScript动态添加和删除类 [英] javascript dynamically adding and removing classes

问题描述

我正在研究一个简单的例子，如果用户点击了元素，那么它上面的所有元素都应该有一个类，并且它下面的所有元素都不应该有任何类应用于它们。

$
$ b

 < script> 
 function test（object）{
 var pid = object.id; 
 var id = parseInt（pid.split（）[1]）; 
 console.log（id）; 
 for（var i = 1; i< = id; i ++）{
 var element = document.getElementById（p+ i）; 
 console.log（element）; 
 element.className =active; 
} 
 console.log（id + 1）; （变量i = id + 1; i< = 4; i ++）{
 var element = document.getElementById（p+ i）; 
 element.className.replace（new RegExp（'（？：^ | \\s）'+'active'+'（？：\\s | $）'），''）; 
 console.log（element）; 
} 
} 
< / script> 
 
< div id =divid> 
< p id =p1onclick =test（this）> one< / p> 
< p id =p2onclick =test（this）> two< / p> 
< p id =p3onclick =test（this）>三< / p> 
 
< / div> 
  

所以在这里如果我点击三个，那么一个，两个，三个元素应该有活跃的类元素四不应该有任何类。这是行得通的。

现在，如果我点击一个，我期待2,3,4应该有任何css类，但它不是这样工作的。 / p>

你能帮我解决问题吗？我想使用纯Javascript。

解决方案

考虑使用onclick属性可能是明智的选择， 。以下内容允许您在工作时不必考虑JavaScript而改变HTML。

https://jsfiddle.net/gseh0wxc/ 2 /

  var getList =（selector）=> [] .slice.call（document.querySelectorAll（选择器））; 
 
 var段落= getList（＃divid p [id ^ ='p']）; 
 paragraphs.forEach（（paragraph，index）=> {
 paragraph.addEventListener（'click'，（e）=> {
 for（let i = 0; i< index; i ++）{
段落[i] .classList.remove（'active'）; 
} 
 for（let i = index; i< paragraphs.length; i ++）{
段落[i] .classList.add（'active'）; 
} 
}）; 
}）
  

I am working on a simple example, if a user clicks on element then all the elements above it should have a class and all elements below it should not have any class applied to them.

Here is my code:

<script>
function test(object) {
    var pid = object.id;
    var id = parseInt(pid.split("")[1]);
    console.log(id);
    for (var i = 1; i <= id; i++) {
        var element = document.getElementById("p"+i);
        console.log(element);
        element.className = "active";
    }
    console.log(id+1);
    for(var i = id+1; i <= 4; i++) {
        var element = document.getElementById("p"+i);
        element.className.replace(new RegExp('(?:^|\\s)'+ 'active' + '(?:\\s|$)'), ' ');
        console.log(element);
    }
}   
</script>

<div id="divid">
    <p id="p1" onclick="test(this)">one</p>
    <p id="p2" onclick="test(this)">two</p>
    <p id="p3" onclick="test(this)">three</p>
    <p id="p4" onclick="test(this)">four</p>
</div>

So here if I click on three then the elements for one, two, three should have the class active and element four should not have any class. This is working fine.

Now if I click on one, I am expecting that two, three, four should have any css class but it is not working like that.

Can you please help me where is the issue. I want to use plain Javascript.

解决方案

It might be wise to consider an alternative to using the onclick attribute due to separation of concerns. The following allows you to alter the HTML without having to consider JavaScript while you work.

https://jsfiddle.net/gseh0wxc/2/

var getList = (selector) => [].slice.call(document.querySelectorAll(selector));

var paragraphs = getList("#divid p[id ^= 'p']");
paragraphs.forEach((paragraph, index) => {
  paragraph.addEventListener('click', (e) => {
    for (let i = 0; i < index; i++) {
      paragraphs[i].classList.remove('active');
    }
    for (let i = index; i < paragraphs.length; i++) {
      paragraphs[i].classList.add('active');
    }
  });
})

这篇关于JavaScript动态添加和删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！