我不是最好的程序员，事实上我根本不是程序员，我可以处理 HTML 和 CSS，但任何更高级的东西都超出了我的能力范围。我已经在一个网站上实现了 jCapSlide，它运行良好，但是，每个图像都必须有自己的属性，如下所示:
<script type="text/javascript">
$(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
});
});
</script>
显然，这会产生大量冗余代码，因此会增加加载时间(每一点都会有所帮助)，所以我正在寻找有关如何减少这种情况的信息。我试过这个:
<script type="text/javascript"> $(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
});
});
</script>
还有这个:
<script type="text/javascript">
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
});
});
</script>
两者都不起作用。非常感谢任何建议!
最佳答案
$("[id^='capslide_img_cont']").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
这将选择 ID 以“capslide_img_cont”开头的所有元素。这是 jQuery 选择器文档的链接，您可以在其中查看选择对象的所有不同方法:http://api.jquery.com/category/selectors/
您的第一次尝试也很接近，但这里是正确的实现:
$("#capslide_img_cont, #capslide_img_cont2, #capslide_img_cont3,...")
如果您担心加载时间，我建议您将所有“capslide_img_cont”元素放入一个带有 id 的 div 中，然后使用这样的选择器(假设“capslide_img_count”元素是 img 标签):
$('#capslide_img_container').find('img').capslide...
这是一个快速选择器，它可以找到带有 'capslide_img_container' id 的单个元素，然后找到其中的所有 img 标签，而我的 [id^='capslide_img_cont'] 示例搜索页面上的每个 id(一个类-based 选择器也会搜索整个页面)。
示例 HTML:
<div id="capslide_img_container">
<img id="capslide_img_cont" src="..." />
<img id="capslide_img_cont2" src="..." />
<img id="capslide_img_cont3" src="..." />
</div>
关于javascript - jQuery jCapSlide 实现 - 具有相同属性的多个元素，如何做一个 Javascript 数组？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7124142/