【发布时间】：2015-08-03 11:38:37
【问题描述】：
我似乎无法解决我的问题。经过几天的深入研究，我得出结论，这个堆栈溢出问题很相似，可能是一个解决方案 (GetElementByID - Multiple IDs)，但经过我所有的试验，我似乎仍然无法为我的代码实现解决方案。 [DEMO]。我已经多次问过同样的问题，但我仍然不断得到广泛的答案，这些答案根本没有帮助。 我的问题是，如何从脚本创建多个 ID 来执行多个开放式转换？
/*!
* classie - class helper functions
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
(function (window) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ('classList' in document.documentElement) {
hasClass = function (elem, c) {
return elem.classList.contains(c);
};
addClass = function (elem, c) {
elem.classList.add(c);
};
removeClass = function (elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function (elem, c) {
return classReg(c).test(elem.className);
};
addClass = function (elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function (elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if (typeof define === 'function' && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);
/**
* main.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/ (function () {
var bodyEl = document.body,
content = document.querySelector('.content-wrap'),
openbtn = document.getElementById('open-button'),
closebtn = document.getElementById('close-button'),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener('click', toggleMenu);
if (closebtn) {
closebtn.addEventListener('click', toggleMenu);
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener('click', function (ev) {
var target = ev.target;
if (isOpen && target !== openbtn) {
toggleMenu();
}
});
}
function toggleMenu() {
if (isOpen) {
classie.remove(bodyEl, 'show-menu');
} else {
classie.add(bodyEl, 'show-menu');
}
isOpen = !isOpen;
}
init();
})();
虽然我特别想通了。
var bodyEl = document.body,
content = document.querySelector('.content-wrap'),
openbtn = document.getElementById('open-button'),
closebtn = document.getElementById('close-button'),
isOpen = false;
如果您滚动到结果屏幕的中间，它们是两个按钮，显示为三个灰点。第一组灰点将打开两个黑框。 我不想这样。我会仅希望第一组灰点仅打开第一个框，第二组灰点仅打开第二个框，等等。
我认为这部分 javascript 是为了实现这一点需要进行更改，尽管就像我之前所说的那样，我似乎无法实现该解决方案。一些非常聪明的头脑可以帮我解决这个问题！请不要建议！只是解决问题的直截了当的答案！
有人可以帮帮我吗，我看到用户用代码段落回答，我的问题对于经验丰富的人来说一点也不难，我知道之前已经完成了！！。
【问题讨论】：
-
您的问题标题和正文问的是两个不同的问题；是哪一个？你想知道如何使用
Document.getElementsByClassName，还是想使用JavaScript为多个元素添加ID？ -
任何一种方法都可以正常工作，但更可能是如何使用 Javascript 将 ID 添加到多个元素。
-
我认为如果您描述需要解决方案的问题而不是粘贴我们需要阅读的脚本以尝试了解您要解决的问题，我认为这个问题可以得到改善。
-
我在最后解释了这个问题。如果您滚动到结果屏幕的中间，它们是两个按钮，显示为三个灰点。第一组灰点将打开两个黑框。我不要那个。我只希望第一组灰点只打开第一个框，第二组灰点只打开第二个框，依此类推。
-
对别人大喊大叫不会帮助你实现目标。此外，如果您希望有人提供帮助，您应该听取提供给您的建议。
标签： javascript html css