如何使用JavaScript将ID添加到多个元素？

Question

我似乎无法找出解决问题的方法。通过激烈的几天研究，我得出结论，这个堆栈溢出问题是类似的，可能是一个解决方案（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是为了实现这一点需要改变的，尽管我之前说过我似乎无法实现解决方案。一些非常聪明的头脑可以帮我解决这个问题！请不要建议！只是一个解决问题的直接答案！

有人可以帮助我，我已经看过使用代码段的答案了，我的问题对于经历过的人来说并不是太困难了，我知道它已经完成了!!

Answer 1

没有人愿意为您编写代码。这是一个Q和A网站，而不是“修复我的代码”网站。用大胆的大喊大叫的人不会得到你所需要的东西。

尽管已经说过......你有两个具有相同ID的按钮，它们试图“打开”不带ID的不同元素。 ID应该是不同的，因此为您的按钮提供不同的ID并为它们附加不同的click函数，或使用相同的方法，但传入元素的ID以进行切换。 click函数应修改特定menu-wrap元素的类，该元素由其自己的不同ID定义。

另一个问题是你的CSS代码修改了body的类以打开菜单。您可能应该修改需要显示/隐藏的特定元素的类。

Here是您代码的修改版本。它有点工作，但应该让你更好地了解你需要做什么。您还应该考虑清理一些代码，并考虑使用jQuery，因为它对新开发人员来说更好。

Answer 2

您正在使用<?php if(get_field('link_tiles')) : while (has_sub_field('link_tiles')) : $number_of_cols = count(get_field( 'link_tiles' )); if ($number_of_cols == 2) { echo '<div class="col-md-6" style="padding: 0; margin: 0;">'; } elseif ($number_of_cols >= 3) { echo '<div class="col-md-4" style="padding: 0; margin: 0;">'; } ?> 打开div，当您点击灰色圆点时，您将类.show-menu .menu-wrap{...}设置为正文，因此两个div都受到样式.show-menu的影响，因为两者都在体内。

修复它的方法是在它们周围放置一个包装器并将.show-menu .menu-wrap切换到您单击的灰色点元素的父元素，如下所示：

＆＃13;

＆＃13;

.show-menu

＆＃13;

$(".menu-button").click(function () {
    $(this).parents(".wrapper").toggleClass("show-menu");
});

＆＃13;

body, .container, .content-wrap {
    width: 100%;
    height: 100%;
}
.container {
    background: #fff;
}
.menu-wrap a {
    color: #b8b7ad;
}
.menu-wrap a:hover, .menu-wrap a:focus {
    color: #c94e50;
}
.content-wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.content {
    position: absolute;
    background: #fff;
    overflow-y: visible;
}
.content::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: none;
    content:'';
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
    transition: opacity 0.4s, transform 0s 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
/* Menu Button 1 */
 .menu-button {
    position: absolute;
    z-index: 1000;
    margin: 1em;
    padding: 0;
    width: 10px;
    height: 50px;
    border: none;
    text-indent: 2.5em;
    font-size: 1.5em;
    color: transparent;
    background: transparent;
    opacity: 1;
    top: 510px;
    -ms-transform: rotate(7deg);
    /* IE 9 */
    -webkit-transform: rotate(7deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    cursor: pointer;
}
.menu-button::before {
    position: absolute;
    top: 0.5em;
    right: 0.2em;
    bottom: 0.4em;
    left: -1px;
    background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
    content:'';
}
.menu-button:hover {
    opacity: 1;
}
/* Close Button */
 .close-button {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 1em;
    font-size: 0.75em;
    border: none;
    background: transparent;
    color: transparent;
    opacity: 0;
}
.close-button::before, .close-button::after {
    content:'';
    position: absolute;
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #bdc3c7;
}
.close-button::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.close-button::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* Comments */
 .menu-wrap {
    position: absolute;
    z-index: 1000;
    width: 429.0500011444092px;
    height: 600.875px;
    right: 0;
    background: #0C0C0C;
    top: 6px;
    padding: 0;
    font-size: 1.15em;
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.menu, .icon-list {
    height: 100%;
}
.icon-list {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.icon-list a {
    display: block;
    padding: 0.8em;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0);
}
.icon-list, .icon-list a {
    -webkit-transition: -webkit-transform 0s 0.4s;
    transition: transform 0s 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.icon-list a:nth-child(2) {
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0);
}
.icon-list a:nth-child(3) {
    -webkit-transform: translate3d(0, 1500px, 0);
    transform: translate3d(0, 1500px, 0);
}
.icon-list a:nth-child(4) {
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
}
.icon-list a:nth-child(5) {
    -webkit-transform: translate3d(0, 2500px, 0);
    transform: translate3d(0, 2500px, 0);
}
.icon-list a:nth-child(6) {
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
}
.icon-list a span {
    margin-left: 10px;
    font-weight: 700;
}
/* Shown menu */
 .show-menu .menu-wrap {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list, .show-menu .icon-list a {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list a {
    -webkit-transition-duration: 0.9s;
    transition-duration: 0.9s;
}
.show-menu .content::before {
    opacity: 1;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

＆＃13;

＆＃13;

＆＃13;

或者，如果您不想更改标记，只需将班级<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="wrapper"> <button class="menu-button">Open Menu</button> <div class="menu-wrap"></div> </div> <div class="wrapper"> <button class="menu-button" style=" top: 560px; ">Open Menu</button> <div class="menu-wrap" style=" top: 700px; "></div> </div> </body>切换为.show-menu本身，并将选择器更改为此.menu-wrap，如下所示：

＆＃13;

＆＃13;

.show-menu.menu-wrap{...}

＆＃13;

$(".menu-button").click(function () {
    $(this).next(".menu-wrap").toggleClass("show-menu");
});

＆＃13;

body, .container, .content-wrap {
    width: 100%;
    height: 100%;
}
.container {
    background: #fff;
}
.menu-wrap a {
    color: #b8b7ad;
}
.menu-wrap a:hover, .menu-wrap a:focus {
    color: #c94e50;
}
.content-wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.content {
    position: absolute;
    background: #fff;
    overflow-y: visible;
}
.content::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: none;
    content:'';
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
    transition: opacity 0.4s, transform 0s 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
/* Menu Button 1 */
 .menu-button {
    position: absolute;
    z-index: 1000;
    margin: 1em;
    padding: 0;
    width: 10px;
    height: 50px;
    border: none;
    text-indent: 2.5em;
    font-size: 1.5em;
    color: transparent;
    background: transparent;
    opacity: 1;
    top: 510px;
    -ms-transform: rotate(7deg);
    /* IE 9 */
    -webkit-transform: rotate(7deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);   
    cursor: pointer;
}
.menu-button::before {
    position: absolute;
    top: 0.5em;
    right: 0.2em;
    bottom: 0.4em;
    left: -1px;
    background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
    content:'';
}
.menu-button:hover {
    opacity: 1;
}
/* Close Button */
 .close-button {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 1em;
    font-size: 0.75em;
    border: none;
    background: transparent;
    color: transparent;
    opacity: 0;
}
.close-button::before, .close-button::after {
    content:'';
    position: absolute;
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #bdc3c7;
}
.close-button::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.close-button::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* Comments */
 .menu-wrap {
    position: absolute;
    z-index: 1000;
    width: 429.0500011444092px;
    height: 600.875px;
    right: 0;
    background: #0C0C0C;
    top: 6px;
    padding: 0;
    font-size: 1.15em;
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.menu, .icon-list {
    height: 100%;
}
.icon-list {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.icon-list a {
    display: block;
    padding: 0.8em;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0);
}
.icon-list, .icon-list a {
    -webkit-transition: -webkit-transform 0s 0.4s;
    transition: transform 0s 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.icon-list a:nth-child(2) {
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0);
}
.icon-list a:nth-child(3) {
    -webkit-transform: translate3d(0, 1500px, 0);
    transform: translate3d(0, 1500px, 0);
}
.icon-list a:nth-child(4) {
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
}
.icon-list a:nth-child(5) {
    -webkit-transform: translate3d(0, 2500px, 0);
    transform: translate3d(0, 2500px, 0);
}
.icon-list a:nth-child(6) {
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
}
.icon-list a span {
    margin-left: 10px;
    font-weight: 700;
}
/* Shown menu */
 .show-menu.menu-wrap {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list, .show-menu .icon-list a {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list a {
    -webkit-transition-duration: 0.9s;
    transition-duration: 0.9s;
}
.show-menu .content::before {
    opacity: 1;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

＆＃13;

＆＃13;

＆＃13;

上面的例子只是给你一个大致的想法，使用纯javascript做家庭作业，但我真的建议你使用jquery。