Question

HTML

 <a data-info-id="show1" onclick="toggleLink();" href="#">Click here for more info</a>
 <div id="show1" border="0">
 More information here
 </div>

CSS

    [id^="show"] { /* gets all elements where id starting with show */
    display: none;
 }

JS

    function toggleLink()
{
     var elem=document.getElementById("show1");
    var hide = window.getComputedStyle(elem, null).display =="none";
     if (hide) {
         elem.style.display="block";
    } 
    else {
       elem.style.display="none";
    }
}

所以这样做是显示/隐藏＆＃34; show1＆＃34;单击链接时进行DIV。我将使用它来显示和隐藏几个DIV标签，它们将被命名为id =＆＃34; show2＆＃34;，id =＆＃34; show3＆＃34; ...等等。那么如何使用data-info-id标签创建一个带有事件监听器的数组，该标签类似于此数组，适用于复选框和单选按钮，但不适用于链接。

    document.addEventListener('change', function(e) {
    var id = e.target.getAttribute('data-info-id');
    var checked = e.target.checked;
    if (id) {
    var div = document.getElementById(id);
    if (div) div.style.display = checked ? 'block' : 'none';
      }
    });

Answer 1

试试这个：

<style>
[id^="show"] { /* gets all elements where id starting with show */
    display: none;
}   
</style>
<script>
  function toggleLink(obj)
    {
        var idCount = obj.id;
        idCount = idCount.replace( new RegExp('c', 'g'), '');

        var elem = document.getElementById("show"+idCount);

        var hide = window.getComputedStyle(elem, null).display =="none";
         if (hide) {
             elem.style.display="block";
        } 
        else {
           elem.style.display="none";
        }
    }
</script>
<a id='c1' href="#" onclick="toggleLink(this)">Link1</a>
<a id='c2' href="#" onclick="toggleLink(this)">Link2</a> 
<a id='c3' href="#" onclick="toggleLink(this)">Link3</a>

<div id="show1" border="0">
More information here for Div1
</div>
<div id="show2" border="0">
More information here for Div2
</div>
<div id="show3" border="0">
More information here for Div3
</div>

Answer 2

使用jQuery，您可以消除所有可能与一个“整洁”行无法跨浏览器兼容的JavaScript代码：

jQuery("a[data-info-id='show1']").click(function(){jQuery("#show1").fadeIn(150);});

虽然我建议您更改约定并在锚点上使用id属性：

<a id="toggle-show1">toggle</a>

因为这样第一次测试更清洁：

jQuery("#toggle-show1")...

（也可能更快）

最后，我不认为“改变”事件是你正在寻找的，而是这里提供的click（）。

P.S。你也可以用$字符替换jQuery。

所有这些都要求你包含jQuery，当然是这样的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

P.S。我将练习作为一种练习方式来编写此代码，以便从任意数量的锚点切换任意数量的<div>，而无需复制/粘贴每个锚点的代码。

使用document.addEventListener切换链接的Javascript数组

2 个答案: