auf Klick-Funktion betrifft mehrere Elemente mit demselben Klassennamen in jquery

Question

Ich möchte YouTube-Video automatisch auf meinem Video-Style-Seite, d. H. http://picovico.com/video-styles/. Ich könnte das Video automatisch abspielen, indem ich auf mein Miniaturbild mit dem angegebenen Code klicke. Dies wirkt sich jedoch auf andere Elemente mit derselben Klasse auf der Seite aus. Mein Code ist:

jQuery(function($) {  
$('.cq-expandgrid-toggle').on('click', function(ev) { 
    $("#pvideo")[0].src += "&autoplay=1"; 
    ev.preventDefault(); 
    }); 
}); 

Wie könnte ich es erreichen. Ich bin ein wenig verwirrt über "dieses" Objekt.

Answer 1

ich einige Pseudo-Code verwendet, um dies zu testen,

HTML

<div class="cq-expandgrid-toggle"> 
    <span id="pvideo"> 
     Click me 
    </span> 
</div> 


<div class="cq-expandgrid-toggle"> 
    <span id="pvideo"> 
     Click me 
    </span> 
</div> 

</body> 
</html> 

JQuery

jQuery(function($) {  
$('.cq-expandgrid-toggle').on('click', function(ev) { 
    var pvideo = this.querySelector("#pvideo"); 
    pvideo.innerHTML = "You clicked on me"; 
    }); 
}); 

Hier ist die Geige https://jsfiddle.net/flyinggambit/LcbLb386/

So sollen Sie Ihren Code ändern

jQuery(function($) {  
$('.cq-expandgrid-toggle').on('click', function(ev) { 
    var pvideo = this.querySelector("#pvideo"); 
    pvideo.src += "&autoplay=1"; 
    ev.preventDefault(); 
    }); 
}); 

Ich bin nicht sicher, ob es ein besserer Weg, diese this.querySelector("#pvideo"); in JQuery zu schreiben.

Update:

Nun, da ich eine Vorstellung von Ihrem HTML-Code haben, habe ich versucht, den Code unten, gibt es einige Änderungen, die Sie Ihren HTML-Code tun sollten, die Dinge einfacher zu machen.

• Stellen Sie sicher, cq-expandgrid-toggle und cq-expandgrid-content sind innerhalb eines übergeordneten Container. Dies wird uns helfen, jede Vorschau als eine einzelne Komponente zu betrachten. Für den Beispielcode habe ich <div name="content-holder">

• Set cq-expandgrid-content als hidden="true" verwendet, so dass standardmäßig die iframe nicht sichtbar ist.

• Lassen Sie das Vorschau-Thumbnail für die Einstellung der URL des iframe verantwortlich sein, dies macht es einfach, das Video zu spielen/anzuhalten, wenn Iframe angezeigt/versteckt wird. Stellen Sie außerdem sicher, dass Sie am Ende der Quelle autoplay=1 hinzufügen.

  <div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/8SDWdlRzIF8?autoplay=1">

HTML

<!-- Preview One --> 
    <div name="content-holder"> 
     <div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/8SDWdlRzIF8?autoplay=1">Preview 1</div> 
     <div name="cq-expandgrid-content" hidden="true"> 
     <iframe name="pvideo" width="560" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
     </div> 
    </div> 

    <!-- Preview Two --> 
    <div name="content-holder"> 
     <div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/eC4Rqa4eQy0?autoplay=1">Preview 2</div> 
     <div name="cq-expandgrid-content" hidden="true"> 
     <iframe name="pvideo" width="560" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
     </div> 
    </div> 

    <!-- Preview Three --> 
    <div name="content-holder"> 
     <div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/oUC0FdMLUpQ?autoplay=1">Preview 3</div> 
     <div name="cq-expandgrid-content" hidden="true"> 
     <iframe name="pvideo" width="560" height="300" frameborder="0" allowfullscreen="allowfullscreen"> 
     </iframe> 
     </div> 
    </div> 

    </body> 
</html> 

JQuery

jQuery(function($) { 
    $('.cq-expandgrid-toggle').on('click', function(ev) { 
    var contentHolder = $(this).parent('div[name=content-holder]'); 
    var expandGridContent = contentHolder.find("div[name=cq-expandgrid-content]"); 

    expandGridContent.toggle(); 
    var iframe = contentHolder.find('iframe'); 
    if (expandGridContent.is(":visible")) { 
     iframe.attr("src", $(this).attr("src")); 
    } else { 
     iframe.attr("src", "#"); 
    } 
    ev.preventDefault(); 
    }); 

Dies ist die Arbeits Geige https://jsfiddle.net/flyinggambit/4zqks7w5/