php - JQuery .eq 选择器不选择元素

Question

我正在尝试制作一个简单的图像旋转器，它将旋转 php 数组中的多个设置图像。数组 out 正确地放置图像，样式有效，甚至淡出事件元素的 JQuery。它只是找不到下一个元素并使用 console.log()，我知道它正在计算正确的元素。我什至尝试在 .eq() 中输入一个数字(如 3)，看看它是否会选择该元素，但它不会。这是我的代码:

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()。

Answer 1

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');
    })
}); 
}