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選擇器不選擇元素

回答

相關問題