在for循环中输出javascript数组值会导致未定义

Question

我正在尝试使用循环在jQuery悬停函数上输出两个数组的值。在悬停之外，我可以很好地访问这些数组值，但在内部我得到了未定义。

JavaScript对我来说还是新手，所以请赐教我任何新手的错误。感谢。

jQuery(document).ready(function($){
var originalWheelContent = $('.wheel-content').html(),
    transitionSpeed = 400,
    segmentTitle = ['collaborative','compassionate','inclusive','empowering','responsive'],
    segmentParagraph = [
        'Working together to deliver the best possible outcomes and recognises and values the contribution of others.',
        'Constantly looking for new ways to satisfy the needs of those you work with or care for. Acting with consideration and understanding for others feelings.',
        'Actively seeking and creating opportunities to include others, fostering an environment where everyone feels valued and respected.',
        'Enabling positive change and supporting others to reach their maximum potential.',
        'Reacting positively to change and others needs by being creative and innovative in finding solutions.'
    ];

for(x = 0; x < segmentTitle.length; x++){
    $('.wheel-graphic map area#' + segmentTitle[x]).hover(
        function(){
            $('.wheel-content').fadeOut(transitionSpeed,function(){
                $('.wheel-content').replaceWith('<div class="wheel-content"><h2 class="segment-title">' + segmentTitle[x] + '</h2><h4 class="segment-p">' + segmentParagraph[x] + '</h4></div>');
            });
        }, function() {
            $('.wheel-content').fadeIn(transitionSpeed);
            $('.wheel-content').replaceWith('<div class="wheel-content">' + originalWheelContent + '</div>');
        }
    );
   }
});

Answer 1

要避免undefined，您需要确保循环递增变量x的范围正确。

使用let：

for (let x = 0; x < segmentTitle.length; x++)