如何将jQuery函数应用于具有相似ID的DOM元素？

Question

我有这个脚本：

<script>
   $('#zoom_01').elevateZoom({});
</script>

其中#zoom_01是图像的ID。我有很多像ID的图像：

zoom_01
zoom_02
zoom_03
zoom_04
and so on

我如何制作这样的javascript会占用所有ID而不是一个？ 我在想这样的事情：

<script>
   <?php 
     foreach ($ArrayAllOfIDs as $i) {  
         $('#<?php echo $i; } ?>').elevateZoom({});
     }
   ?>
</script>

但它没有用。

Answer 1

尽管如上所述使用class属性可能是您最好的选择，但如果您因任何原因被迫使用ID，您可以使用“启动时”选择器，如

$("[id^=zoom_]").elevateZoom({})

将elevateZoom应用于id以“zoom _”开头的所有DOM元素。

Answer 2

为所有同时受影响的图像添加一个类 ID用于识别唯一的非重复项目。由于您的图像几乎相同，因此一个类可以将它们组合在一起。

然后，更改您的javascript以选择课程。

$('.zoom').elevateZoom({});

Answer 3

我不知道elevateZoom是什么，但你可能会有这样的语法：

$('#zoom_01, #zoom_02, #zoom_03, ...').elevateZoom({});

Answer 4

让PHP写出Javascript，以便在浏览器中加载页面时可以使用它。

<script>
<?php 
foreach ($ArrayAllOfIDs as $i) {  
    echo '$(\'#zoom_'. $i .'} \').elevateZoom({});\n';
} 
?>
</script>