javascript - 使用没有 jQuery 的 javascript 调用当前元素

Question

首先，我对我的英语不好感到抱歉:) 我这里有一些代码:

<style>
    .active circle {fill:red;}
    .deactive circle {fill:black;}
</style>
<form>
    <input type="button" id="btn" value="btn1"/>
    <svg class="deactive">
        <circle cx="10" cy="10" r="10"/>
    </svg>
<input type="button" id="btn" value="btn2"/>
    <svg class="a">
        <circle cx="10" cy="10" r="10"/>
    </svg>
</form>

我想更改圆圈类，用 javascript 单击按钮，而不是使用 jQuery。 例如:我单击第一个按钮，第一个圆圈会将类别更改为“事件”，第二个圆圈类别将更改为“非事件”。 如果我单击第二个按钮，第一个圆类将替换为“非事件”，第二个圆类将替换为“事件”

谢谢。

Answer 1

尽管有可能，但不推荐多次使用 id ( HTML id Attribute )，因为它必须引用 body 中的唯一元素。

除此之外，使用纯原生 javascript 而不是 jQuery 会涉及更多代码，请参阅跨浏览器、DOM 遍历等。

无论如何，如果有帮助的话，您可以看看这个起点:

<input type="button" id="btn1" value="btn1"/>
<svg class="deactive">
    <circle cx="10" cy="10" r="10"/>
</svg>
<input type="button" id="btn2" value="btn2"/>
<svg class="a">
    <circle cx="10" cy="10" r="10"/>
</svg>

<script>
    function changeClass(e)
    {
        var btns = document.getElementsByTagName('input');
        var btnsLength = btns.length;

        for( var i = 0; i < btnsLength; i++)
        {
            btns[i].nextElementSibling.setAttribute("class", "deactive");
        }

        e.target.nextElementSibling.setAttribute("class", "active");
    }

    document.getElementById('btn1').addEventListener('click', changeClass, false);
    document.getElementById('btn2').addEventListener('click', changeClass, false);  
</script>

基本上我只是为每个按钮定义了一个处理程序。

document.getElementById('btn1').addEventListener('click',changeClass, false);

这会调用函数changeClass。

在此函数内，我循环访问每个按钮并设置其 nextElementSibling 的类 deactive。

最后，我在函数 changeClass 中设置了单击元素的事件类，作为引用传递 e

----------替代起点------------

另一种探索方式可能是这样的:

function setElActive(el, event)
{
    document.getElementById(el).addEventListener('click', function(e)
    {
        var btns = document.getElementsByTagName('input');
        var btnsLength = btns.length;

        for( var i = 0; i < btnsLength; i++)
        {
            btns[i].nextElementSibling.setAttribute("class", "deactive");
        }

        e.target.nextElementSibling.setAttribute("class", "active");
    }, false);

}

setElActive('btn1', 'click');
setElActive('btn2', 'click');