javascript - 需要 document.getElementById 的解决方法，以便循环遍历多个 ID 可能性。类(class)不工作

Question

我的 HTML 文档中有 30 个链接，所有这些链接在单击时都会触发一个特定的 div 使用 js 函数更改其 id。

这是 30 个链接中的三个，后面跟着一个 ID 发生变化的 div。

<a href="#" onclick="changediv_1()">Link 1</a>
<a href="#" onclick="changediv_2()">Link 2</a>
<a href="#" onclick="changediv_3()">Link 3</a>

<div id="contain"></div>

这是 div id 更改功能(可以工作，但不符合我的喜好):

    function changediv_1()
    {   
        if (document.getElementById("contain")) {  
            document.getElementById("contain").setAttribute("id", "contain_1");
        }

    }

问题出在这里:当我点击链接 1 时，它会将 div id 从“contain”更改为“contain_1”，没有问题。现在div名称是“contain_1”，所以如果我在单击链接1后尝试单击链接2，它将不起作用，因为div id现在是“contain_1”并且每个函数只能调用1个id。

我需要上述函数来检查多个 div(即:#contain、#contain_1、#contain_2)。

理想情况像这样:

    function changediv_2()
    {   
        if (document.getElementById("**contain, contain_1, contain_2, ...**")) {  
            document.getElementById("**contain, contain_1, contain_2, ...**").setAttribute("id", "contain_x");
        }

    }

我研究并尝试应用 .getElementByClass 但它不起作用 - 函数似乎只适用于 id。必须有一种方法可以绕过我将函数发布 900(毫不夸张)次来支持每种情况。非常感谢您的耐心阅读我这篇怪异的小说。

Answer 1

尝试使用数据并使用 on.click 而不是内联 JavaScript 函数 HTML

<a href="#" data-contain="1">Link 1</a>
<a href="#" data-contain="2">Link 2</a>
<a href="#" data-contain="3">Link 3</a>

<div id="contain" class="containDiv"></div>

jQuery

$(function () {
    $('a').on('click', function () {
        var contain = "contain_" + $(this).data('contain');
        $('.containDiv').attr('id', contain);
        //contain == contain_(1,2,3)
        /*
         Rest of your code to read from php and put into contain?
      */
    });
});