javascript forEach - hinzufügen addEventListener auf alle Tasten

Ich bin nicht so geschickt im Umgang mit javascript, so dass ich bin auf der Suche nach ein wenig Hilfe.
Ich bin über ein Skript finden Sie auf Codrops (3D-Raster-Effekt - http://tympanus.net/Development/3DGridEffect/).

Alles funktioniert wie erwartet, in Ordnung, aber ich bin versucht zu "ändern" für meine Bedürfnisse.

Grundsätzlich möchte ich zum auslösen den "Effekt" NICHT klicken auf den gesamten container, sondern auf eine Schaltfläche platziert.

Die Struktur, die ich verwende, ist:

    <section class="grid3d vertical" id="grid3d">
        <div class="grid-wrap">
            <div class="grid">
                <div class="box"><div class="btn-click-me">Click to Show</div></div>
                <div class="box"><div class="btn-click-me">Click to Show</div></div>
                <div class="box"><div class="btn-click-me">Click to Show</div></div>

            </div>
        </div>
        <div class="content">
            <div>
                <div class="dummy-img"></div>
                <p class="dummy-text">Some text</p>
                <p class="dummy-text">Some more text</p>
            </div>
            <div>
                <!-- ... -->
            </div>
            <!-- ... -->
            <span class="loading"></span>
            <span class="icon close-content"></span>
        </div>
    </section>

<script>
            new grid3D( document.getElementById( 'grid3d' ) );
        </script>

Und das script (js) ist

/**
 * grid3d.js v1.0.0
 * 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( window ) {

    'use strict';

    function grid3D( el, options ) {
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }

    //any options you might want to configure
    grid3D.prototype.options = {};

    grid3D.prototype._init = function() {
        //grid wrapper
        this.gridWrap = this.el.querySelector( 'div.grid-wrap' );
        //grid element
        this.grid = this.gridWrap.querySelector( 'div.grid' );
        //main grid items
        this.gridItems = [].slice.call( this.grid.children );
        //default sizes for grid items
        this.itemSize = { width : this.gridItems[0].offsetWidth, height : this.gridItems[0].offsetHeight };
        //content
        this.contentEl = this.el.querySelector( 'div.content' );
        //content items
        this.contentItems = [].slice.call( this.contentEl.children );
        //close content cross
        this.close = this.contentEl.querySelector( 'span.close-content' );
        //loading indicator
        this.loader = this.contentEl.querySelector( 'span.loading' );
        //support: support for pointer events, transitions and 3d transforms
        this.support = support.pointerevents && support.csstransitions && support.csstransforms3d;
        //init events
        this._initEvents();
    };

    grid3D.prototype._initEvents = function() {
        var self = this;

        //open the content element when clicking on the main grid items
        this.gridItems.forEach( function( item, idx ) {
            item.addEventListener( 'click', function() {
                self._showContent( idx );
            } );
        } );

        //close the content element
        this.close.addEventListener( 'click', function() {
            self._hideContent();
        } );

        if( this.support ) {
            //window resize
            window.addEventListener( 'resize', function() { self._resizeHandler(); } );

            //trick to prevent scrolling when animation is running (opening only)
            //this prevents that the back of the placeholder does not stay positioned in a wrong way
            window.addEventListener( 'scroll', function() {
                if ( self.isAnimating ) {
                    window.scrollTo( self.scrollPosition ? self.scrollPosition.x : 0, self.scrollPosition ? self.scrollPosition.y : 0 );
                }
                else {
                    self.scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
                    //change the grid perspective origin as we scroll the page
                    self._scrollHandler();
                }
            });
        }
    };

    //creates placeholder and animates it to fullscreen
    //in the end of the animation the content is shown
    //a loading indicator will appear for 1 second to simulate a loading period
    grid3D.prototype._showContent = function( pos ) {
        if( this.isAnimating ) {
            return false;
        }
        this.isAnimating = true;

        var self = this,
            loadContent = function() {
                //simulating loading...
                setTimeout( function() {
                    //hide loader
                    classie.removeClass( self.loader, 'show' );
                    //in the end of the transition set class "show" to respective content item
                    classie.addClass( self.contentItems[ pos ], 'show' );
                }, 1000 );
                //show content area
                classie.addClass( self.contentEl, 'show' );
                //show loader
                classie.addClass( self.loader, 'show' );
                classie.addClass( document.body, 'noscroll' );
                self.isAnimating = false;
            };

        //if no support just load the content (simple fallback - no animation at all)
        if( !this.support ) {
            loadContent();
            return false;
        }

        var currentItem = this.gridItems[ pos ],
            itemContent = currentItem.innerHTML;

        //create the placeholder
        this.placeholder = this._createPlaceholder(itemContent );

        //set the top and left of the placeholder to the top and left of the clicked grid item (relative to the grid)
        this.placeholder.style.left = currentItem.offsetLeft + 'px';
        this.placeholder.style.top = currentItem.offsetTop + 'px';

        //append placeholder to the grid
        this.grid.appendChild( this.placeholder );

        //and animate it
        var animFn = function() {
            //give class "active" to current grid item (hides it)
            classie.addClass( currentItem, 'active' );
            //add class "view-full" to the grid-wrap
            classie.addClass( self.gridWrap, 'view-full' );
            //set width/height/left/top of placeholder
            self._resizePlaceholder();
            var onEndTransitionFn = function( ev ) {
                if( ev.propertyName.indexOf( 'transform' ) === -1 ) return false;
                this.removeEventListener( transEndEventName, onEndTransitionFn );
                loadContent();
            };
            self.placeholder.addEventListener( transEndEventName, onEndTransitionFn );
        };

        setTimeout( animFn, 25 );
    };

    grid3D.prototype._hideContent = function() {
        var self = this,
            contentItem = this.el.querySelector( 'div.content > .show' ),
            currentItem = this.gridItems[ this.contentItems.indexOf( contentItem ) ];

        classie.removeClass( contentItem, 'show' );
        classie.removeClass( this.contentEl, 'show' );
        //without the timeout there seems to be some problem in firefox
        setTimeout( function() { classie.removeClass( document.body, 'noscroll' ); }, 25 );
        //that's it for no support..
        if( !this.support ) return false;

        classie.removeClass( this.gridWrap, 'view-full' );

        //reset placeholder style values
        this.placeholder.style.left = currentItem.offsetLeft + 'px';
        this.placeholder.style.top = currentItem.offsetTop + 'px';
        this.placeholder.style.width = this.itemSize.width + 'px';
        this.placeholder.style.height = this.itemSize.height + 'px';

        var onEndPlaceholderTransFn = function( ev ) {
            this.removeEventListener( transEndEventName, onEndPlaceholderTransFn );
            //remove placeholder from grid
            self.placeholder.parentNode.removeChild( self.placeholder );
            //show grid item again
            classie.removeClass( currentItem, 'active' );
        };
        this.placeholder.addEventListener( transEndEventName, onEndPlaceholderTransFn );
    }

    //function to create the placeholder
    /*
    <div class="placeholder">
        <div class="front">[content]</div>
        <div class="back"></div>
    </div>
    */
    grid3D.prototype._createPlaceholder = function( content ) {
        var front = document.createElement( 'div' );
        front.className = 'front';
        front.innerHTML = content;
        var back = document.createElement( 'div' );
        back.className = 'back';
        back.innerHTML = '&nbsp;';
        var placeholder = document.createElement( 'div' );
        placeholder.className = 'placeholder';
        placeholder.appendChild( front );
        placeholder.appendChild( back );
        return placeholder;
    };

    grid3D.prototype._scrollHandler = function() {
        var self = this;
        if( !this.didScroll ) {
            this.didScroll = true;
            setTimeout( function() { self._scrollPage(); }, 60 );
        }
    };

    //changes the grid perspective origin as we scroll the page
    grid3D.prototype._scrollPage = function() {
        var perspY = scrollY() + getViewportH() / 2;
        this.gridWrap.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px';
        this.gridWrap.style.MozPerspectiveOrigin = '50% ' + perspY + 'px';
        this.gridWrap.style.perspectiveOrigin = '50% ' + perspY + 'px';
        this.didScroll = false;
    };

    grid3D.prototype._resizeHandler = function() {
        var self = this;
        function delayed() {
            self._resizePlaceholder();
            self._scrollPage();
            self._resizeTimeout = null;
        }
        if ( this._resizeTimeout ) {
            clearTimeout( this._resizeTimeout );
        }
        this._resizeTimeout = setTimeout( delayed, 50 );
    }

    grid3D.prototype._resizePlaceholder = function() {
        //need to recalculate all these values as the size of the window changes
        this.itemSize = { width : this.gridItems[0].offsetWidth, height : this.gridItems[0].offsetHeight };
        if( this.placeholder ) {
            //set the placeholders top to "0 - grid offsetTop" and left to "0 - grid offsetLeft"
            this.placeholder.style.left = Number( -1 * ( this.grid.offsetLeft - scrollX() ) ) + 'px';
            this.placeholder.style.top = Number( -1 * ( this.grid.offsetTop - scrollY() ) ) + 'px';
            //set the placeholders width to windows width and height to windows height
            this.placeholder.style.width = getViewportW() + 'px';
            this.placeholder.style.height = getViewportH() + 'px';
        }
    }

    //add to global namespace
    window.grid3D = grid3D;

})( window );

Nun, ich bin mir bewusst, dass der "entscheidende" Teil des Codes, wo ich Sie zu suchen ist:

//open content-element beim klicken auf das main grid-Elemente
diese.gridItems.forEach( function(Element, idx ) {
Element.addEventListener( 'click', function() {
Element._showContent( idx ); } ); } );

Also, meine Frage nochmal: wie lösen Sie das Ereignis, wenn der div-Element (button) Klasse "Klick-mich" angeklickt, alle "Boxen"?

Danke an alle im Voraus (ich bin mit ihm zu kämpfen für Stunden...)

java? jQuery? Was ist mit "heal the world" - tag?
Ja, sorry! Getippt mit Handy, autocompletion!

InformationsquelleAutor David Madhatter | 2015-01-14

html javascript

Haben Sie einen Blick auf das Beispiel hier,

http://jsfiddle.net/y0mbn94n/

Habe ich Hinzugefügt einige intialisation, um Ihre bestimmten Klassen

    //get grid buttons and then make an iterable array out of them        
    this.gridButtons = this.el.querySelectorAll('button.btn-click-me');
    this.gridButtonItems = [].slice.call(this.gridButtons);

geändert und die Funktion, die iteriert und fügt einen listener.

    //open the content element when clicking on the buttonsItems
    this.gridButtonItems.forEach(function (item, idx) {
        item.addEventListener('click', function () {
            self._showContent(idx);
        });
    });

InformationsquelleAutor Rob Schmuecker

Wenn Sie möchten, eine callback-Funktion aufrufen, wenn der Benutzer klickt auf eine Schaltfläche:

var buttons = document.querySelectorAll('.btn-click-me');
for (var i = 0; i < buttons.length; i++) {
    var self = buttons[i];

    self.addEventListener('click', function (event) {  
        //prevent browser's default action
        event.preventDefault();

        //call your awesome function here
        MyAwesomeFunction(this); //'this' refers to the current button on for loop
    }, false);
}

Danke. Das ist das, was ich suchte

InformationsquelleAutor Fernando Porazzi

0

mit der Struktur gegeben
```
    <div class="grid-wrap">
        <div class="grid">
            <div class="box"><div class="btn-click-me">Click to Show</div></div>
            <div class="box"><div class="btn-click-me">Click to Show</div></div>
            <div class="box"><div class="btn-click-me">Click to Show</div></div>

        </div>
    </div>
```
müssen Sie nur ändern Sie die Zeile wie du gesagt hast:
```
item.children[0].addEventListener( 'click', function() {
```
als die btn-click-mir wäre das erste Kind für jedes Element.

Wenn Sie möchten, eine allgemeinere Lösung, die Sie verwenden könnten:
```
item.getElementsByClassName('btn-click-me')[0].addEventListener( 'click', function() {
```
wo bnt-Klick-mich wäre das Klasse für die Schaltfläche, die Sie möchten, um ein binden des click-Ereignisses. Beachten Sie, dass [0] so können Sie wählen Sie das erste Element des Arrays, wie getElementsByClassName zurückkehren wird, auch wenn es nur ein element.

Aber wenn Sie sagen, Sie beginnen gerade erst mit javascript y wirklich empfehlen, Sie mit jQuery, es Selektoren sind viel leichter als Vanille javascript.

Hallo Alvaro, danke! Und wenn ich die Klick auslösen NICHT auf das erste Kind aber ein Kind mit einer bestimmten Klasse? Nochmals vielen Dank!
Ich habe nicht gesehen, Ihren Kommentar, aber ich habe es verbessert die Antwort, so könnte es Arbeit für jeden Selektor 🙂

InformationsquelleAutor Alvaro Pinot

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.