Question

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



    var $item = $('div.imgItem'), //Cache your DOM selector
        visible = 1, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1, //End index
        imgIndex = 1; 

    $('div#imageItem' + imgIndex).click(function(){
        if (index == 0 || index == (endIndex-1))
        {
            var animatePX = imgWidth * .85 + 2;
        }
        else
        {
            var animatePX = imgWidth * .9 + 2;
        }

        if(index < endIndex ){
          index++;
          imgIndex++;
          //alert (imgIndex);
          $item.animate({'left':'-='+animatePX});
        }
    });

});

我正在尝试创建幻灯片..我的问题是变量imgIndex在函数内部递增，但第二次调用函数时，imgIndex的值仍为0 .. 有人可以帮我这个.. 我希望每次都将递增的值作为参数传递..

@jfriend00这里是我的HTML

<div class="imgItem" id="imgItem0">
</div>
<div class="imgItem" id="imgItem1">
</div>
<div class="imgItem" id="imgItem2">
</div>
<div class="imgItem" id="imgItem3">
</div>
<div class="imgItem" id="imgItem4">
</div>

一个图像将被加载到每个div中...当我创建一个滑块时，我想点击下一个图像来滑动它..这就是为什么我使用不同的id为div ...

现在你能告诉我应该怎么改变这一行

$('div#imageItem' + imgIndex).click(function(){

Answer 1

代码行：

$('div#imageItem' + imgIndex).click(function(){

似乎是使用imgIndex的唯一代码行，并且它只运行一次，所以它只会以0的{{1}}初始值执行一次。

如果您希望它多次执行，那么您需要在imgIndex处理程序中再次执行它，或者创建一个.click()循环以多次执行多次值，或者您' d需要设置不同类型的事件处理，其中初始事件处理程序适用于许多对象。

我们必须查看您的HTML，并了解您要了解的内容，以了解最佳路径。

如果你想要多个对象的点击处理程序，那么最好在它们上面放一个公共类名，这样就可以像这样设置事件处理程序：

for

或者，如果这些是动态创建的元素，则使用委托事件处理：

$('.imageItemCommon').click(function(){{/* code here */});

P.S。我没有理由使用$(static parent selector).on('.iamgeItemCommon', 'click', function() {/* code here */});而不仅仅'div#imageItem0'作为选择器。添加'div'部分只会减慢选择器引擎的速度，因为ids在文档中是唯一的，所以你不应该将它作为过滤器的一部分。

好了，既然你已经显示了实际的HTML，我建议你使用这种形式的事件处理程序，因为它适用于所有幻灯片（不需要id）：

'#imageItem0'

而且，我认为这种动画更简单：

// advance to next slide on click
$(".imgItem").click(function() {
    // use $(this) to refer to the currently clicked on slide

});

使用HTML和CSS进行演示：http://jsfiddle.net/jfriend00/AZ7NY/

Answer 2

你的选择器：

$('div#imageItem' + imgIndex)

仅在imgIndex=1时创建一次。你需要创造一些更通用的东西：

$('div[id^=imageItem]').click(function(){
    if ('imageItem'+imgIndex === this.id) {
        if (index == 0 || index == (endIndex-1))
        {
            var animatePX = imgWidth * .85 + 2;
        }
        else
        {
            var animatePX = imgWidth * .9 + 2;
        }

        if(index < endIndex ){
          index++;
          imgIndex++;
          //alert (imgIndex);
          $item.animate({'left':'-='+animatePX});
        }
    }
});

增量JavaScript变量未作为参数传递

2 个答案: