我如何正确创建一个字符串在JavaScript/jQuery中的变量？

问题描述：

我希望使用字符串'activeVideo'作为变量，但我无法让它工作。我觉得我很接近做正确的事情，但我现在一直坚持几个小时......我做错了什么？我如何正确创建一个字符串在JavaScript/jQuery中的变量？

firstVideo = 'https://www.youtube.com/embed/kxopViU98Xo?rel=0&amp;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>

你只是不要。至少不*正确* –

请不要链接到第三方网站，因为这些链接可能会随着时间的推移而死亡。只需在代码片段中发布您的代码就可以了。 –

只需将'activeVideo = this.id +'Video';'放入关闭函数中，它就可以工作。并且请注意，您需要声明变量!! **，为此使用'const'，'let'，'var'。然后你的代码会在这种情况下崩溃，你可以回到正确的轨道 –

答

字符串不可执行，不能用于代替评估代码。但是，对象结构只不过是键（即字符串）和值，所以您可以将字符串（通过数组索引符号）传递给对象以提取该键的值。

既然你正在构建对应元素的id的字符串，可以传递字符串作为“钥匙” window对象，它将解析正确的对象，因为与id小号元素成为全局属性。

然后，如果将URL存储到另一个对象中的视频中，则可以将该字符串传递给该对象以提取所需的URL。

你还需要声明你的变量并给它们适当的范围。

$(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&amp;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>

感谢您的所有建议。这是我需要的东西。再次，非常感谢！ :) – alc

嗯好的。我刚发现这个解决方案在iOS上不起作用。你知道这可能是为什么吗？ – alc

@alc您在开发者控制台中看到什么消息。在这段代码中，我想不出任何非标准的东西。 –

答

这将修复它...

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

免责声明：正如你从下面的评论中看到，它不是流行。我对此很清楚。你可以停止投票。如果你是那些相信eval()是邪恶的人，请随时不要使用它。但这是一个可行的解决方案，可以快速轻松地解决问题，而不使用它（恕我直言）将是一个过早的优化。当然可以自由地做自己的研究，以决定是否走这条路。

'eval（）'从来不是解决任何问题的好办法。 –

这将回答这个问题，但不是。 –

@ScottMarcus我不同意这个答案，但这是不正确的。如果使用得当，这很好。我能想到的一个例子就是构建一个模板引擎。 – zfrisch

答

而不是两个单独的参数，你可以这样定义一个对象：

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

然后使用该对象与ID为关键索引到它：

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]); 
});

我如何正确创建一个字符串在JavaScript/jQuery中的变量？

相关推荐