动态添加到javascript数组

Question

我有一个 javascript 文件，用于从数组中获取图像 url 的滑块。如何从后面的代码中添加图片网址。我想从数据库中获取图片 url，所以我想从后面的代码中将图像添加到数组中。我使用asp.net c#。 jquery 文件如下：

$(function() {
    $('#ds_showcase').showcase({
        linksOn: 'images',
        css: {},
        animation: { autoCycle: true, type: 'horizontal-slider', interval: 4000, stopOnHover:true, speed: 1500, easefunction: 'easeOutBounce'},
        images: [
                  { url: 'Showcase_ds_images/lift-truck.jpg ', description: 'Title 2', link: '', target: '_self' },
                  { url: 'Showcase_ds_images/lifttruck2.jpg', description: 'Title 3', link: '', target: '_self' },
                  { url: 'Showcase_ds_images/lift-truck3.jpg', description: 'Title 4', link: '', target: '_self' },

        ],
        navigator: { position: 'bottom-right', orientation: 'horizontal', autoHide: false, showNumber: false,
            css: { padding: '10px'}, 
            item: { css: { height: '10px', width: '10px', backgroundColor: '#cccccc', borderColor: '#999999'},
                    cssHover: { backgroundColor: '#3399ff'},
                    cssSelected: { backgroundColor: '#3399ff', borderColor: '#3399ff'}
            }
        }

    });
});

Answer 1

你总是可以这样做：

var jsArr = [];
<%foreach(string img in images){%>
   jsArr.push('<%=img%>');
<%}%>

此代码将从服务器生成带有硬编码字符串的 js。 每个客户端看到的js会是这样的：

 var jsArr = [];

    jsArr.push('http://server/img1.png');
    jsArr.push('http://server/img2.png');
    jsArr.push('http://server/img3.png');

在你的情况下 - 像这样：

$(function() {
    var jsArr = [];
    <%foreach(Image img in images){%>
       jsArr.push({url: '<%=img.url%>', description: '<%=img.desc%>', link: '', target:'_self'});
    <%}%>

    $('#ds_showcase').showcase({
        linksOn: 'images',
        css: {},
        animation: { autoCycle: true, type: 'horizontal-slider', interval: 4000, stopOnHover:true, speed: 1500, easefunction: 'easeOutBounce'},
        images: jsArr,
        navigator: { position: 'bottom-right', orientation: 'horizontal', autoHide: false, showNumber: false,
            css: { padding: '10px'}, 
            item: { css: { height: '10px', width: '10px', backgroundColor: '#cccccc', borderColor: '#999999'},
                    cssHover: { backgroundColor: '#3399ff'},
                    cssSelected: { backgroundColor: '#3399ff', borderColor: '#3399ff'}
            }
        }

    });
});