javascript动态添加和删除类[重复]

Question

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

这是我的代码：

<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>

所以在这里，如果我点击三，那么一、二、三的元素应该有活动的类，而元素四不应该有任何类。这工作正常。

现在如果我点击一个，我希望二、三、四应该有任何 css 类，但它不是那样工作的。

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

Answer 1

由于关注点分离，考虑使用 onclick 属性的替代方法可能是明智的。以下内容允许您在工作时更改 HTML，而无需考虑 JavaScript。

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');
    }
  });
})

Answer 2

请试试这个代码

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);
        element.classList.add("active");
    }
    console.log(id+1);
    for(var i = id+1; i <= 4; i++) {
        var element = document.getElementById("p"+i);
        element.classList.remove("active");
    }
}

希望这会有所帮助。

Answer 3

改用这种简单的方法，不需要提取 id 号和所有内容，并且只需一个简单的循环。

function test(option) {
//this will select all p tags id starts with "p" inside div having id "divid" and return a array
var targetPTags = document.querySelectorAll("div#divid p[id^=p]")
var idx, flag=false;
    //we are iterating over that array and taking each dom element in el
    for(idx=0;idx<targetPTags.length;idx++) {
        var el = targetPTags[idx];
        if(flag) {
            //do operation you want for after elements in el
        } else if(option===el) {
            flag=true; // we are making flag true when its the element that clicked and doing no operation
            //do the operation you want for the element, may be the same as below operation in else
        } else {
            //do operation you want for before element in el
        }
    }
}

Answer 4

有点类似于“Chatterjee”的解决方案，但在这里：

function test(object)
{
    var parentElem = null;
    var childElems = null;
    var currElemSet = false;
    var i=-1;

    try
    {
        parentElem = object.parentElement;

        if(parentElem!=null)
        {
            childElems=parentElem.getElementsByTagName(object.nodeName); // could refine to accommodate sibling nodes only
            if(childElems!=null)
            {
                for(i=0;i<childElems.length; i++)
                {
                    if(currElemSet) childElems[i].className = "";
                    else childElems[i].className = "active";

                    if(childElems[i]==object) currElemSet = true;
                }
            }

        }
    }
    catch(e)
    {
        alert("Error:  " + e.Message);
    }
    finally
    {

    }

}