2009-11-04 58 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();} 
    ); 
});