更改活动 div 时交换后伸图像

Question

我正在使用Backstretch jQuery plugin 创建全屏背景图片，但我有一个只有 1 页的滚动网站，我想根据活动的内容 div 更改背景图片。

有多种方式可以滚动到站点上的每个面板，包括方向按钮、单击面板以及从 nab 菜单中选择链接，因此需要能够在不同的位置调用此函数。

目前，该站点将“活动”类添加到为 CSS 样式选择的任何 div，然后滚动到该位置。实际上，我需要将路径更改为 $.backstretch("http://example.com/assets/image.jpg");当活动面板发生变化时。我想运行一个函数来将背景图像交换到某些面板的特定路径，否则当不是特定面板之一时，从一个小数组中选择一个随机图像。

我的直觉是使用 switch 语句，但需要请求帮助。

这是一个 WordPress 网站，面板是动态输出的，所以我不能硬编码；它需要以与当前活动面板选择相同的方式与 id 和哈希标签相关联。

我的 JS 代码，就目前而言，如下所示。我不太擅长 JS，所以我很欣赏可能有更有效的方法来安排这段代码，但我目前的技能水平限制了我。

非常感谢您提供的任何帮助。

jQuery(function( $ ){ 
                $.easing.elasout = function (x, t, b, c, d) {
                    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
                };

                $.backstretch("http://example.com/assets/image.jpg");

                $('#content').scrollTo( 0 );
                $.scrollTo( 0 );

                $('.menu a').click(function(e){
                    e.preventDefault();
                    var link = e.target;
                    link.blur();
                    if( link.title )
                        $(this).parent().find('span.message').text(link.title);
                });

                // clicking from menu   
                $('.menu a').click(function(){
                        $target = $(this.hash); 
                    $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');           
                    return false;
                });

                //clicking on a panel
                $('.panel').click(function(){
                        $target = $(this); 
                    $.scrollTo( $target, 1000, { easing:'elasout', offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                    $target.addClass('active');
                    return false;
                });

                // click on up button
                $('#verticals a.up').click(function(){
                    if ( $('div.panel.active').prev('div.panel').length){
                        $target = $('div.panel.active').prev();
                        $.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on down button
                $('#verticals a.down').click(function(){
                    if ( $('div.panel.active').next('div.panel').length){
                        $target = $('div.panel.active').next();
                        $.scrollTo( $target, 500, {offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on right button
                $('#horizontals a.right').click(function(){
                    if ( $('div.panel.active').parent().next('div.col').length){
                        $target = $('div.panel.active').parent().next('div.col').children('div:nth-child(1)');
                        $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                // click on left button
                $('#horizontals a.left').click(function(){
                    if ( $('div.panel.active').parent().prev('div.col').length){
                        $target = $('div.panel.active').parent().prev('div.col').children('div:nth-child(1)');
                        $.scrollTo( $target, 1000, { easing:'elasout', queue:true, offset:{ top:-150,left:-300 }});
                        $('div.panel.active').removeClass('active');
                        $target.addClass('active');
                        return false;
                    }
                    else {
                        return false;
                    }
                });

                $(document).ready(function(){

                    $('.menu li').hover(
                        function () {
                            $('ul', this).slideDown(200);
                            $('ul', this).parent().addClass('active');
                        }, 
                        function () {
                            $('ul', this).slideUp(200);
                            $('ul', this).parent().removeClass('active');      
                        }
                    );

                    $('.panel').tinyscrollbar();

                    $("#key-facts").fadeTransition();

                });

            });

Answer 1

终于到了。这是给任何找到这个寻求安慰的人：

var a = [
  ['115', 'filename.jpg'],  
  ['148', 'filename.jpg'], 
  ['150', 'filename.jpg'], 
  ['153', 'filename.jpg'],
  ['155', 'filename.jpg'],
  ['157', 'filename.jpg'] 

   // ... etc, continue as required
]

function setBackground(id){
  for (var i = 0; i < a.length; i++){
   if (a[i][0] == id){
    $.backstretch('http://insert base URL here' + a[i][1]);
    return;
   }
  }
    var aRandom = [
     'filename.jpg', 
     'filename.jpg'
    ]

 // array of images for id with undefined image to be randomly selected from

    var b = aRandom[Math.floor(Math.random()*aRandom.length)];
  $.backstretch('http://insert base URL here' + b);
}