如何从Javascript/jQuery中的字符串正确创建变量？

我希望使用字符串“activeVideo”作为变量，但无法使其正常工作。我想我已经很接近做对了，但我已经被困了好几个小时了……我做错了什么

firstVideo=https://www.youtube.com/embed/kxopViU98Xo?rel=0&showinfo=0？ecver=2；自动播放=1'；
第二视频https://www.youtube.com/embed/FWO5Ai_a80M?ecver=2;自动播放=1'；
jQuery（'.play circle'）。单击（函数（）{
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'）。单击（函数（）{
console.log（“关闭视频”）；
jQuery（activeVideo）.attr（'src'，''）；
jQuery（'.video'）.fadeOut（0）；
jQuery（'.video close'）.fadeOut（0）；
jQuery（'.play circle'）.fadeIn（0）；
});
正文{
背景色：#000000；
}
.横幅宽度{
位置：相对位置；
高度：720px；
背景：url（'https://picsum.photos/1000/500'）中心/盖；
}
.banner-wide.text{
宽度：30%；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
左缘：7%；
}
.横幅宽度。文本h3，
.banner-wide.text-p{
文本对齐：左对齐；
颜色：#ffffff；
}
.视频缩略图{
z指数：11；
位置：相对位置；
右：0；
排名：0；
宽度：50%；
高度：360px；
光标：指针；
浮动：对；
填充物：5px；
框大小：边框框；
}
.玩圆圈{
宽度：100%；
身高：100%；
背景：url（'http://addplaybuttontoimage.way4info.net/Images/Icons/13.png'无重复中心/150px rgba（0,0,0,0.7）；
}
.视频{
显示：无；
宽度：100%；
高度：360px；
位置：相对位置；
右：0；
排名：0；
}
.视频关闭{
显示：无；
位置：绝对位置；
宽度：20px；
高度：20px；
顶部：14px；
右：20px；
光标：指针；
背景：url（'http://freevector.co/wp-content/uploads/2013/03/8934-close-button1.png’）无重复中心/20px rgba（255,255,255,1）；
边界半径：100px；
盒影：0.20px rgba（0,0,0,0.1）；
z指数：1；
}

这将修复它

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

免责声明：从下面的评论中可以看出，它并不流行。我知道这一点。你可以停止投票。如果你是那些相信
eval（）
是邪恶的人之一，请不要使用这个。但这是一个可行的解决方案，可以快速轻松地解决问题，不使用它（IMHO）将是一个过早的优化。当然，您可以自由地进行自己的研究，以决定是否走这条路。
字符串不是可执行的，不能仅仅用来代替经过评估的代码

但是，对象结构只不过是键（即字符串）和值，因此可以将字符串（通过数组索引表示法）传递到对象中以提取该键的值

由于您正在构建的字符串对应于元素的
id
，因此可以将该字符串作为“键”传递给
窗口
对象，它将解析正确的对象，因为具有
id
s的元素将成为全局属性

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

您还需要声明您的变量并为它们指定适当的范围


$（函数（）{
//通过将数据存储在具有键/值对的对象中，可以
//稍后通过对象的范围访问
var obj={
第一个视频：'https://www.youtube.com/embed/kxopViU98Xo?rel=0&；showinfo=0？ecver=2；自动播放=1'，
第二段视频：'https://www.youtube.com/embed/FWO5Ai_a80M?ecver=2；自动播放=1'
}
var activeVideo=”“；//需要在一个可以从两个函数访问的范围内声明它
jQuery（'.play circle'）。单击（函数（）{
activeVideo=this.id+“Video”；
jQuery（'.play circle'）.fadeOut（0）；
jQuery（'.video'）.fadeIn（0）；
jQuery（'.video close'）.fadeIn（0）；
//获取存储在全局属性中的元素并传递给jQuery，然后
//从存储对象中取出密钥并用作源：
jQuery（window[activeVideo]）.attr（'src'，obj[activeVideo]）；
//测试：
log（jQuery（window[activeVideo]）.attr（'src'）；
});
jQuery（'.video close'）。单击（函数（）{
console.log（“关闭视频”）；
//id为的元素成为全局属性，因此字符串
//可以将其id的项作为键传递给窗口对象：
$（窗口[activeVideo]）.attr（'src'，''；
jQuery（'.video'）.fadeOut（0）；
jQuery（'.video close'）.fadeOut（0）；
jQuery（'.play circle'）.fadeIn（0）；
});
});
正文{
背景色：#000000；
}
.横幅宽度{
位置：相对位置；
高度：720px；
背景：url（'https://picsum.photos/1000/500'）中心/盖；
}
.banner-wide.text{
宽度：30%；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
左缘：7%；
}
.横幅宽度。文本h3，
.banner-wide.text-p{
文本对齐：左对齐；
颜色：#ffffff；
}
.视频缩略图{
z指数：11；
位置：相对位置；
右：0；
排名：0；
宽度：50%；
高度：360px；
光标：指针；
浮动：对；
填充物：5px；
框大小：边框框；
}
.玩圆圈{
宽度：100%；
身高：100%；
背景：url（'http://addplaybuttontoimage.way4info.net/Images/Icons/13.png'无重复中心/150px rgba（0,0,0,0.7）；
}
.视频{
显示：无；
宽度：100%；
高度：360px；
位置：相对位置；
右：0；
排名：0；
}
.视频关闭{
显示：无；
位置：绝对位置；
宽度：20px；
高度：20px；
顶部：14px；
右：20px；
光标：指针；
背景：url（'http://freevector.co/wp-content/uploads/2013/03/8934-close-button1.png’）无重复中心/20px rgba（255255,1）；
边界半径：100px；
盒影：0.20px rgba（0,0,0,0.1）；
z指数：1；
}

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'};

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