2009-11-04 113 views
1

不確定如果這可以完成,我接近它的方式。這裏什麼也沒有。我從一個php上傳腳本回顯圖像,每個img都有一個以A1,A2,A3,A4等開頭的唯一ID。現在我可以選擇這個img ID並創建我想要的動作,但是我必須爲每個ID都做這件事,我不會在創建新動作時做到這一點,我如何告訴jQuery對A1做同樣的事情A2,A3)某種增量。jQuery ID選擇動態

JS

$(document).ready(function(){ 
    $("#1 ").hover(
    function(){ 
    $("#A1").slideDown(); 
    }, 

    function(){ 
    $("#A1").slideUp(); 
    }); 
}); 

$(document).ready(function(){ 
    $("#2 ").hover(

    function(){ 
    $("#A2").slideDown(); 
    }, 
    function(){ 
    $("#A2").slideUp(); 
    }); 
}); 

PHP

$i= 0; while(($file = $myDir->read()) !==false){ 
    if(!is_dir($file)){ 
    $i++; 
    //echo "Filename: $file<br/>"; 
    echo "<div id='images'>"; 
    echo "<p>"; 
    echo "<a id='$i'href=\"display/$file\"><img src=\"thumbs/$file\" /> </a>\n"; 
    echo "</p>"; 
    echo"</div>"; 
    echo "<div id='imageHolder' >"; 
    echo "<img id='A$i' style='display:none' src=\"display/$file\" />"; 
    echo"</div>"; 
    } 
} 
+0

什麼樣的元素是你的「#1」和#2「的元素什麼是你的HTML結構(是?你的#1和#2元素裏面的圖像?)?你是通過ajax加載新圖像還是隻加載初始頁面? – Aaron

+0

#1#2元素是錨定標記,我添加了我的html/php我想做什麼對於我選擇的元素有相同的數字增量,因此當我通過上傳腳本添加新元素時,我不必寫出每個元素。 –

+0

我建議您謹慎使用以數字開頭的ID,您可能會遇到在某些特定情況下遇到困難瀏覽器。這是別人對此事的看法:http://css-tricks.com/ids-cannot-start-with-a-number/ – Funka

回答

2

您的新產品如何生成?在頁面加載,或者你通過jQuery使用ajax請求?在這兩種情況下,你可以選擇某一個值開始的所有元素(即「A」)是這樣的:

$("a").hover(
    function(){ 
     $(this).find(img[id^='A']).slideDown(); 
    }, 
    function(){ 
     $(this).find(img[id^='A']).slideUp(); 
}); 

有人隨時幫助我,如果我在這裏下車。

UPDATE

謝謝你們 - 那這樣呢?

$("a").hover(
    function(){ 
     id = $(this).attr('id'); 
     $("#A"+id).slideDown(); 
    }, 
    function(){ 
     id = $(this).attr('id'); 
     $("#A"+id).slideUp(); 
}); 

這看起來對頁面上的所有鏈接,並使用該ID(按你的代碼),以查找幻燈片項目。如果你正在動態創建它們,你會想把它放在一個函數中,並在ajaxComplete上再次調用它。

+0

這樣做可行,但是他們爲每次獨特的潛水執行不同的操作,他們在懸停時顯示出不同的東西。這種方式一次顯示他們。 –

+0

你的選擇是正確的,但我認爲它不會有幫助。他需要捕獲將圖像添加到頁面以將懸停事件添加到頁面時發生的事件。您的示例將爲懸停事件上的所有圖像添加動畫;我認爲他只是想讓懸停的圖像動起來。 – Tmdean

+0

是啊是的,它的工作 –

1

我會保存所有對象ID JavaScript數組。然後你可以循環訪問數組,併爲每個id做你想做的工作。

+0

我有點困惑,看起來如何,我沒有在JavaScript中完成數組。 –

0

將jQuery.live()用於「永久」事件處理程序(以防將圖像動態添加到頁面中)或使用jQuery.each()遍歷所有實例。

到底會是這樣(不使用現場活動):

$("a:has(img.my_image)").each(function(){ 
    $(this).hover(
     function(){$(this).slideDown();}, 
     function(){$(this).slideUp();} 
    ); 
});