Question

我试图在this示例之后的一个页面中创建多个轮播我在foreach循环中创建我的旋转木马，并为每个旋转木马分配名称c0，c1，c2等（每个旋转木马都是<div>）
现在，为了根据示例运行脚本，我应该分别在每个轮播上运行例如：

<script type="text/javascript">
    $(document).ready(function() {

        $('#c0').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });
        $('#c1').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 5, orientation: 'h' });
        $('#c2').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });

    });       

</script>

由于我的旋转木马是在foreach循环中创建的，我不知道它会有多少，所以我试着在for循环中调用该函数：

    for (int i = 0; i < counter; i++)
    {
        string cNum = "#c" + i.ToString();%>
        <script type="text/javascript">
            $(document).ready(function() {
                $(cNum).jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
            });
        </script>
   <%} %>

我检查过，cNum值没问题，它得到的值是＃c0，＃c1等，但它无法识别它等同于'＃c0'等等。。

如何将动态轮播名称插入到函数中？

Answer 1

不要这样做，只需给每个div一个类。像这样：

<div class="someClassThatIKnowIsACarousel">

然后你不需要循环：

$(".someClassThatIKnowIsACarousel").jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });

Answer 2

代码中的问题是动态生成的JavaScript部分中的cNum不会被解释为ASP变量。您可以使用$('<% cNum %>')之类的内容修复此问题（也请注意JavaScript引号，但不会得到$(#c0)，这是错误的）。

但是，您的方法是错误的，请尽量避免混合服务器/客户端代码。

正如aquinas已经指出的那样，最好的解决方案是在div中添加一个类：

HTML：

<div class="carousel">

JavaScript的：

$('div.carousel').jsCarousel({ ... });

在具有不同参数的循环中调用jQuery函数

2 个答案: