多個切換鏈接

我正在使用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

多個切換鏈接

回答

相關問題