Comment créer correctement une variable à partir d'une chaîne dans Javascript/jQuery?

Question

Je souhaite utiliser la chaîne 'activeVideo' comme variable, mais je n'arrive pas à la faire fonctionner. Je pense que je suis assez proche de faire les choses correctement, mais j'ai été coincé pendant des heures maintenant ... Qu'est-ce que je fais mal?

firstVideo = 'https://www.youtube.com/embed/kxopViU98Xo?rel=0&showinfo=0?ecver=2;autoplay=1'; 
 
secondVideo = 'https://www.youtube.com/embed/FWO5Ai_a80M?ecver=2;autoplay=1'; 
 
jQuery('.play-circle').click(function() { 
 
    console.log(this.id + 'Video'); 
 
    activeVideo = this.id + 'Video'; 
 
    jQuery('.play-circle').fadeOut(0); 
 
    jQuery('.video').fadeIn(0); 
 
    jQuery('.video-close').fadeIn(0); 
 
    jQuery('#' + this.id + 'Video').attr('src', activeVideo); 
 
}); 
 
jQuery('.video-close').click(function() { 
 
    console.log('closing video'); 
 
    jQuery(activeVideo).attr('src', ''); 
 
    jQuery('.video').fadeOut(0); 
 
    jQuery('.video-close').fadeOut(0); 
 
    jQuery('.play-circle').fadeIn(0); 
 
});

body { 
 
    background-color: #000000; 
 
} 
 

 
.banner-wide { 
 
    position: relative; 
 
    height: 720px; 
 
    background: url('https://picsum.photos/1000/500') center/cover; 
 
} 
 

 
.banner-wide .text { 
 
    width: 30%; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    margin-left: 7%; 
 
} 
 

 
.banner-wide .text h3, 
 
.banner-wide .text p { 
 
    text-align: left; 
 
    color: #ffffff; 
 
} 
 

 
.video-thumbnail { 
 
    z-index: 11; 
 
    position: relative; 
 
    right: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 360px; 
 
    cursor: pointer; 
 
    float: right; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 

 
.play-circle { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url('http://addplaybuttontoimage.way4info.net/Images/Icons/13.png') no-repeat center/150px rgba(0, 0, 0, 0.7); 
 
} 
 

 
.video { 
 
    display: none; 
 
    width: 100%; 
 
    height: 360px; 
 
    position: relative; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.video-close { 
 
    display: none; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    top: 14px; 
 
    right: 20px; 
 
    cursor: pointer; 
 
    background: url('http://freevector.co/wp-content/uploads/2013/03/8934-close-button1.png') no-repeat center center/20px rgba(255, 255, 255, 1); 
 
    border-radius: 100px; 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="banner-wide owc"> 
 
    <div class="video-thumbnail"> 
 
    <div id="first" class="play-circle"></div> 
 
    <div class="video-close"></div> 
 
    <iframe class="video" id="firstVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    <div class="video-thumbnail"> 
 
    <div id="second" class="play-circle"></div> 
 
    <div class="video-close"></div> 
 
    <iframe class="video" id="secondVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
</div>

Answer 1

Les chaînes ne sont pas exécutables et ne peuvent pas être utilisées à la place du code évalué. Cependant, les structures d'objet ne sont rien de plus que des clés (qui sont des chaînes) et des valeurs, donc vous pouvez passer une chaîne (via la notation d'indexation de tableau) dans un objet pour extraire la valeur de cette clé.

Depuis la chaîne que vous construisez correspond à un id d'un élément, vous pouvez passer cette chaîne comme une « clé » à l'objet window et il résoudra l'objet correct parce que les éléments avec id s deviennent propriétés globales. Puis, si vous stockez les URL des vidéos dans un autre objet, vous pouvez passer la chaîne à cet objet pour extraire l'URL dont vous avez besoin.

Vous devez également déclarer vos variables et leur attribuer une portée correcte.

$(function(){ 
 

 
    // By storing the data in an object with key/value pairs, the key names can be 
 
    // accessed via the scope of the object later 
 
    var obj = { 
 
    firstVideo : 'https://www.youtube.com/embed/kxopViU98Xo?rel=0&showinfo=0?ecver=2;autoplay=1', 
 
    secondVideo : 'https://www.youtube.com/embed/FWO5Ai_a80M?ecver=2;autoplay=1' 
 
    } 
 

 
    var activeVideo = ""; // Need to declare this in a scope that can be accessed from both functions 
 

 
\t \t jQuery('.play-circle').click(function(){ 
 

 
     activeVideo = this.id + 'Video';  
 
     jQuery('.play-circle').fadeOut(0); 
 
\t \t \t jQuery('.video').fadeIn(0); 
 
\t \t \t jQuery('.video-close').fadeIn(0); 
 
     
 
     // Get the element stored in the global property and pass to jQuery, then 
 
     // get the key out of the storage object and use as the source: 
 
\t \t \t jQuery(window[activeVideo]).attr('src', obj[activeVideo]); 
 
     // Test: 
 
\t \t \t console.log(jQuery(window[activeVideo]).attr('src')); 
 
\t \t }); 
 

 
\t \t jQuery('.video-close').click(function(){ 
 
\t \t \t console.log('closing video'); 
 
     // Elements with id's become global properties, so the string 
 
     // of their id can be passed as a key to the window object: 
 
\t \t \t $(window[activeVideo]).attr('src',''); 
 
\t \t \t jQuery('.video').fadeOut(0); 
 
\t \t \t jQuery('.video-close').fadeOut(0); 
 
\t \t \t jQuery('.play-circle').fadeIn(0); 
 
\t \t }); 
 
});

body { 
 
    background-color: #000000; 
 
} 
 
.banner-wide { 
 
\t position: relative; 
 
\t height: 720px; 
 
\t background: url('https://picsum.photos/1000/500') center/cover; 
 
} 
 
.banner-wide .text { 
 
\t width: 30%; 
 
\t position: relative; 
 
\t top: 50%; 
 
\t transform: translateY(-50%); 
 
\t margin-left: 7%; 
 
} 
 
.banner-wide .text h3, 
 
.banner-wide .text p { 
 
\t text-align: left; 
 
\t color: #ffffff; 
 
} 
 
.video-thumbnail { 
 
\t z-index: 11; 
 
\t position: relative; 
 
\t right: 0; 
 
\t top: 0; 
 
\t width: 50%; 
 
\t height: 360px; 
 
\t cursor: pointer; 
 
    float: right; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.play-circle { 
 
\t width: 100%; 
 
\t height: 100%; 
 
    background: url('http://addplaybuttontoimage.way4info.net/Images/Icons/13.png') no-repeat center/150px rgba(0,0,0,0.7); 
 
} 
 
.video { 
 
\t display: none; 
 
\t width: 100%; 
 
\t height: 360px; 
 
\t position: relative; 
 
\t right: 0; 
 
\t top: 0; 
 
} 
 
.video-close { 
 
\t display: none; 
 
\t position: absolute; 
 
\t width: 20px; 
 
\t height: 20px; 
 
\t top: 14px; 
 
\t right: 20px; 
 
\t cursor: pointer; 
 
\t background: url('http://freevector.co/wp-content/uploads/2013/03/8934-close-button1.png') no-repeat center center/20px rgba(255,255,255,1); 
 
\t border-radius: 100px; 
 
\t box-shadow: 0 0 20px rgba(0,0,0,0.1); 
 
\t z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="banner-wide owc"> 
 
     <div class="video-thumbnail"> 
 
      <div id="first" class="play-circle"></div> 
 
      <div class="video-close"></div> 
 
      <iframe class="video" id="firstVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    <div class="video-thumbnail"> 
 
      <div id="second" class="play-circle"></div> 
 
      <div class="video-close"></div> 
 
      <iframe class="video" id="secondVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    </div>

Answer 2

Cela réparer ...

jQuery('#' + this.id + 'Video').attr('src',eval(activeVideo)); 

AVERTISSEMENT: Comme vous le verrez dans les commentaires ci-dessous, ce n'est pas populaire. Je suis au courant de ça. Vous pouvez arrêter de voter ceci. Si vous êtes parmi ceux qui croient que le mal est eval(), n'hésitez pas à ne pas l'utiliser. Mais c'est une solution viable, aborde rapidement et facilement le problème, et de ne pas l'utiliser (IMHO) serait une optimisation prématurée. Certainement n'hésitez pas à faire vos propres recherches pour décider si vous voulez ou non suivre cette route.

Answer 3

Au lieu de deux variables distinctes, vous pouvez définir un objet comme:

var vids = {first: 'https://www.youtube.com/embed/kxopViU98Xo?rel=0&showinfo=0?ecver=2;autoplay=1', 
      second: 'https://www.youtube.com/embed/FWO5Ai_a80M?ecver=2;autoplay=1'}; 

Et puis utilisez l'objet avec l'identifiant comme la clé pour les indexer:

jQuery('.play-circle').click(function(){   
    jQuery('.play-circle').fadeOut(0); 
    jQuery('.video').fadeIn(0); 
    jQuery('.video-close').fadeIn(0); 
    jQuery('#' + this.id + 'Video').attr('src',vids[this.id]); 
});