Question

var toggle = document.getElementById('toggle');
var slider = document.querySelector('.slider');

toggle.addEventListener('click', toggleSlider, false);

function toggleSlider()
{
    if (slider.classList.contains('opened')) {
        slider.classList.remove('opened');
        slider.classList.add('closed');
    } else {
        slider.classList.remove('closed');
        slider.classList.add('opened');
    }
}

请帮我回答我的问题，在切换arera和滑块区域声明多个ID，以便有多个切换和滑块？

Answer 1

id在文档中应该是唯一的，您需要使用class对toggle进行分组。将toggle类添加到元素中，然后您可以执行以下操作：

var toggle = document.querySelectorAll('.toggle');

querySelector()仅返回找到的第一个匹配元素，使用querySelectorAll()查询整个文档。然后，您可以遍历返回的HTMLCollection并添加事件监视器。

Answer 2

您没有发布HTML。所以这是一个可能的解决方案：

var toggle = document.querySelectorAll('.toggle'),
    slider = document.querySelectorAll('.slider'),
    opened = document.getElementsByClassName('opened');

// Sort sliders by data-slider id
slider = [].slice.call(slider).sort(function (a, b) {
    return +a.dataset.slider - +b.dataset.slider;
});

for (var i = 0; i < toggle.length; i++) {
    toggle[i].addEventListener('click', toggleSlider, false);
}

function toggleSlider() {
    opened.length && opened[0].classList.remove('opened');
    slider[this.dataset.id - 1].classList.toggle('opened');
}

这个HTML：

<a class="toggle" data-id="1">Toggle 1</a>
<a class="toggle" data-id="2">Toggle 2</a>
<a class="toggle" data-id="3">Toggle 3</a>

<div class="slider" data-slider="3">Slider 3</div>
<div class="slider" data-slider="1">Slider 1</div>
<div class="slider" data-slider="2">Slider 2</div>

如何在声明的1变量中放置多个elementID？

2 个答案:

演示：http://jsfiddle.net/JrE6t/