多个切换链接

我正在使用HTML和JavaScript，我需要创建两个切换链接实例。这里是我的一个单一的一个代码：多个切换链接

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "link1"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "link1"; 
    } 
} 
</script> 


<body> <a id="displayText" href="javascript:toggle()" style="font-size:160%;">link1</a> 
    <div id="toggleText" style="display: none; font-size:160%;"><p>paragraph1</p></div><br></body>

我需要两个曲柄连杆独立显示/隐藏文本的不同的段落被点击每一个时候。我如何在第一个下面添加第二个实例？

来源

2016-08-16 Garrettfromhp

你的意思是这样的http： //jsfiddle.net/bLu5q625/ – Jag

@JAG这样做！非常感谢。 – Garrettfromhp

向每个链接添加一个事件处理程序和一个data-toggle-id属性。在您的事件处理程序中，获取data-toggle-id的值并使用它来查找您想要显示的段落。然后使用元素的classList的切换方法来添加/删除显示段落的类。

var links = document.querySelectorAll('[data-toggle-id]'); 
 

 
for (var ix = 0; ix < links.length; ix++) { 
 
    links.item(ix).addEventListener('click', function() { 
 
    document.getElementById(this.dataset.toggleId).classList.toggle('show'); 
 
    }); 
 
}

.toggleText { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: block; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <a data-toggle-id="paragraph1">link1</a> 
 
    <div class="toggleText" id="paragraph1"> 
 
    <p>paragraph1</p> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <a data-toggle-id="paragraph2">link2</a> 
 
    <div class="toggleText" id="paragraph2"> 
 
    <p>paragraph2</p> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <a data-toggle-id="paragraph3">link3</a> 
 
    <div class="toggleText" id="paragraph3"> 
 
    <p>paragraph3</p> 
 
    </div> 
 
</div>

如果你恨for循环，您可以使用尼克的建议和节点列表转换为和数组，并使用在foreach方法：

Array.prototype.slice.call(document.querySelectorAll('[data-toggle-id]')).forEach(function(element) { 
    element.addEventListener('click', function(){ 
     document.getElementById(this.dataset.toggleId).classList.toggle('show'); 
    }); 
});

来源

2016-08-16 21:02:38 Will

我从来没有尝试过，但querySelectorAll返回一个NodeList和一个NodeList没有forEach方法。也许有些浏览器支持它？ – Will

多个切换链接

回答

相关问题