jQuery jCapSlide实现 – 具有相同属性的多个元素，如何做一个Javascript数组？
我不是最好的程序员，事实上我根本不是程序员，我可以处理HTML和CSS，但更高级的东西超出了我。 我已经在网站上实现了jCapSlide，它工作得很好，但是，每个图像都必须拥有自己的属性，如下所示：
$(function() { $("#capslide_img_cont").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont2").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont3").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont4").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont5").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont6").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont7").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont8").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont9").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont10").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont11").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont12").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont13").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont14").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont15").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont16").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont17").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont18").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont19").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); $("#capslide_img_cont20").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); }); 显然这会产生大量的冗余代码，因此加载时间（并且每一点都有帮助），所以我知道如何减少这个。 我试过这个：
$(function() { $("#capslide_img_cont","#capslide_img_cont2","#capslide_img_cont3","#capslide_img_cont4","#capslide_img_cont5","#capslide_img_cont6","#capslide_img_cont7","#capslide_img_cont8","#capslide_img_cont9","#capslide_img_cont10","#capslide_img_cont11","#capslide_img_cont12","#capslide_img_cont13","#capslide_img_cont14","#capslide_img_cont15","#capslide_img_cont16","#capslide_img_cont17","#capslide_img_cont18","#capslide_img_cont19","#capslide_img_cont20"").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); });
还有这个：
var allBoxes=new Array("capslide_img_cont","capslide_img_cont2","capslide_img_cont3","capslide_img_cont4","capslide_img_cont5","capslide_img_cont6","capslide_img_cont7","capslide_img_cont8","capslide_img_cont9","capslide_img_cont10","capslide_img_cont11","capslide_img_cont12","capslide_img_cont13","capslide_img_cont14","capslide_img_cont15","capslide_img_cont16","capslide_img_cont17","capslide_img_cont18","capslide_img_cont19","capslide_img_cont20"); $(function() { $("#allBoxes").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); });
两者都不奏效。 任何建议感激不尽！
$("[id^='capslide_img_cont']").capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true });
这将选择所有带有以“capslide_img_cont”开头的ID的元素。 以下是jQuery选择器文档的链接，您可以在其中查看选择对象的所有不同方法： http ： //api.jquery.com/category/selectors/
你第一次尝试也很接近，但这是适当的实施：
$("#capslide_img_cont, #capslide_img_cont2, #capslide_img_cont3,https://stackoverflow.com/questions/7124142/jquery-jcapslide-implementation-multiple-elements-with-the-same-attributes-ho/...")
如果你担心加载时间，我会建议把你所有的“capslide_img_cont”元素放到一个带有id的div中，然后使用这样的选择器（假设“capslide_img_count”元素是img标签）：
$('#capslide_img_container').find('img').capslidehttps://stackoverflow.com/questions/7124142/jquery-jcapslide-implementation-multiple-elements-with-the-same-attributes-ho/...
这是一个快速选择器，它找到带有’capslide_img_container’id的单个元素，然后查找其中的所有img标签，而我的[id ^ =’capslide_img_cont’]示例搜索页面上的每个id（基于类的选择器）也搜索整个页面）。
示例HTML：
最简单的方法是添加一个类，使您可以轻松识别所有图像（或者更好的是只将一个类添加到图像滑块的包含元素中），然后使用jQuery迭代图像。
每个图像上的类示例：
而在JS中：
$('.yourImgClass').each(function(){ $(this).capslide({ caption_color : 'white', caption_bgcolor : '#005ca7', overlay_bgcolor : 'orange', border : '', showcaption : true }); });
如果您想要将类添加到包含元素，则可以构造HTML，如：
并使用jQuery选择该容器中的每个图像：
$('.myContainer img')