JQuery .eq选择器不选择元素

-1

我想要制作一个简单的图像旋转器，它将通过php数组中的一些设置图像进行旋转。数组正确放置图像，样式工作，甚至是淡化活动元素的JQuery。它只是找不到下一个元素并使用console.log（），我知道它正在计算正确的一个。我甚至试图在.eq（）中放入一个数字（如3）来查看它是否会选择该元素，而不会。这里是我的代码：JQuery .eq选择器不选择元素

PHP代码：

$randomNumber = rand(0); 

$performanceImages = array("09_15_11-Lorton_opening_088.jpg", 
          "09_15_11-Lorton_opening_120.jpg", 
          "09_15_11-Lorton_opening_123.jpg", 
          "09_15_11-Lorton_opening_125.jpg", 
          "09_15_11-Lorton_opening_126.jpg", 
          "09_15_11-Lorton_opening_128-150x150.jpg", 
          "09_15_11-Lorton_opening_131.jpg", 
          "09_15_11-Lorton_opening_132.jpg", 
          "09_15_11-Lorton_opening_135-199x300.jpg", 
          "09_15_11-Lorton_opening_137-150x150.jpg", 
          "09_15_11-Lorton_opening_144.jpg", 
          "09_15_11-Lorton_opening_161.jpg"); 

$randomNumber = rand(0, (sizeof($performanceImages) - 1)); 

for ($cnt = 0; $cnt < sizeof($performanceImages); $cnt++) { 
    if ($cnt == $randomNumber) { 
     echo '<div id="rotator-image" class="active" style="display:block;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>'; 
    } else { 
     echo '<div id="rotator-image" style="display:none;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>'; 
    } 
}

CSS：

#sidebar-image-rotator { 
width: 180px; 
height: 263px; 
position: relative; 
} 

#rotator-image { 
position: absolute; 
top: 0; 
left: 0;  
}

JQuery的：

function sidebarImageRotator(){ 

var count = $("#sidebar-image-rotator").children("#rotator-image").length; 
//console.log(count); 
var active = $('#rotator-image.active').index(); 
//console.log(active); 

if ((active + 1) < count) { 
    var next = active + 1; 
} else { 
    var next = 0; 
} 
//console.log(next); 

//change div classes 
$("#rotator-image.active").fadeOut('slow', function() { 
    $("#rotator-image.active").removeClass("active").css("display","none"); 
    $('#sidebar-image-rotator').find('#rotator-image').eq(next).addClass('active').fadeIn('slow', function() { 
     $('#rotator-image.active').css('display', 'block'); 
    }) 
}); 
} 

function startTimer() { 
//timer for the box 
window.timer = window.setInterval(function() { 
    $("#sidebar-image-rotator").timer(); 
}, 7000); 

jQuery.fn.timer = function() { 
    sidebarImageRotator(); 
} 
}

startTimer所（）被调用与页面加载。

来源

2012-09-19 BobbyDank

如果这是JS相关的问题，请发布产生的HMTL而不是PHP。 – elclanrs

ID必须是唯一的。 – undefined

HTML id必须是唯一的。 jQuery只会找到第一个id，改为使用类。

像下面

示例PHP循环：

for ($cnt = 0; $cnt < sizeof($performanceImages); $cnt++) { 
    if ($cnt == $randomNumber) { 
     echo '<div class="rotator-image active" style="display:block;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>'; 
    } else { 
     echo '<div class="rotator-image" style="display:none;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>'; 
    } 
}

范例CSS

.rotator-image { 
position: absolute; 
top: 0; 
left: 0;  
}

例jQuery的

var count = $("#sidebar-image-rotator").children(".rotator-image").length; 
//console.log(count); 
var active = $('.rotator-image.active').index(); 
//console.log(active); 

if ((active + 1) < count) { 
    var next = active + 1; 
} else { 
    var next = 0; 
} 
//console.log(next); 

//change div classes 
$(".rotator-image.active").fadeOut('slow', function() { 
    $(".rotator-image.active").removeClass("active").css("display","none"); 
    $('#sidebar-image-rotator').find('.rotator-image').eq(next).addClass('active').fadeIn('slow', function() { 
     $('.rotator-image.active').css('display', 'block'); 
    }) 
}); 
}

来源

2012-09-19 22:20:43 OJay

非常感谢！我在另一个网站上使用了这个相同的脚本，我用id没有任何问题。我想从现在开始我会用类。 – BobbyDank

-1

认为这是问题

if ((active + 1) < count) { 
     **var next = active + 1;** 
    } else { 
     var next = 0; 
    }

您需要声明VAR未来外设功能的..否则，每次函数调用时都会通过一个新的实例

来源

2012-09-19 22:25:14

的id属性应该是唯一的更换;您的选择器#rotator-image将返回第一个元素id = rotator-image并忽略其余部分。你可以上的ID选择，而不是明确：

$('#sidebar-image-rotator').find('[id=rotator-image]').eq(next)

更好的方法是使用一些其他属性上的元素，如rel或data-type或什么的。

<div rel='rotator-image' ... ></div>

来源

2012-09-19 22:26:47 McGarnagle

JQuery .eq选择器不选择元素

回答

相关问题