Question

在document.ready上，我定义了几个函数，然后尝试使用window [variable]调用它们，其中变量是函数的名称。我在这里发现了这个问题：Calling a JavaScript function named in a variable。这是我的代码：

jQuery(document).ready(function() {


function playSlide0(){
    player0.playVideo();
    console.log('slide0 fired');
}
function playSlide1(){
    player1.playVideo();
    console.log('slide1 fired');
}
function playSlide2(){
    player2.playVideo();
    console.log('slide2 fired');
}

swiper.on('slideChangeStart', function () {


    var currentSlide = swiper.activeIndex;
    var currentVid = document.getElementById('video'+currentSlide);
    var currentVidId = 'slide_'+currentSlide;
    var playSlideFunction = 'playSlide'+currentSlide;

    window[playSlideFunction]();

});

});

我没有调用我的函数，而是收到错误'window [playSlideFunction]不是函数'。有什么想法吗？谢谢。

Answer 1

在1.114*10=11.14内，document.ready的值不是窗口，而是this

document

jQuery(document).ready(function() {
  console.log(document === this); // true
  console.log(window === this); // false
});

这就是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>未定义的原因处理此问题的正确方法是使用您控制的对象，而不是window[playSlideFunction]或document

window

Answer 2

您可以将函数包装在对象中

var fn = {
    playSlide0: function () {
        player0.playVideo();
        console.log('slide0 fired');
    },
    playSlide1: function () {
        player1.playVideo();
        console.log('slide1 fired');
    },
    playSlide2: function () {
        player2.playVideo();
        console.log('slide2 fired');
    }
}

并使用名称

调用它

fn['playSlide' + currentSlide]();

Answer 3

一般来说，这不是一个很好的方法。很难给出一个非常具体的答案，因为我们没有页面的其余部分，但总的来说，你最好使用一个函数来获取一个参数，告诉它要操作哪个东西。这是DRY的基本原则 - 不要重复自己。

您可能会这样做：

假设您有一堆视频元素 - 您可以使用以下内容获取它们：

var players = document.querySelectorAll('video');

现在玩家是一个玩家列表 - 您可以按顺序引用每个玩家：

players[0] //etc

现在你只需要一个功能，无论你有多少玩家：

function playSlide(index){
  players[index].playVideo();
  console.log('player ' + index  + 'fired');
}

你可以用这样的东西：

var currentSlide = swiper.activeIndex
playSlide(currentSlide)

现在，如果添加更多播放器，则无需更改代码，如果要更改代码中的某些内容，只需在一个位置进行更改即可。

Answer 4

由于这显然是xyproblem，我将修改代码：

jQuery(document).ready(function() {
    swiper.on('slideChangeStart', function() {
        var i = swiper.activeIndex;
        jQuery("#swiper video").get()[i].playVideo();
        console.log('slide ' + i + ' fired');
    });
});

这假设滑触器具有id="swiper"，并且包含<video>个元素。

在Javascript中将函数作为变量调用

4 个答案: