1

我的 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 次（毫不夸张）的功能来支持每种情况。非常感谢您的耐心和阅读我的帖子。

4

1 回答 1

0

试试这个使用数据并使用 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?
      */
    });
});
于 2013-10-16T00:20:30.247 回答