jQuery jCapSlide实现-具有相同属性的多个元素，如何执行Javascript数组? [英] jQuery jCapSlide implementation - multiple elements with the same attributes, how to do a Javascript Array?

问题描述

我不是最好的程序员，实际上我根本不是程序员，我可以处理HTML和CSS，但是任何高级的东西都超出了我.我已经在网站上实现了jCapSlide，并且效果很好，但是，每个图像都必须具有自己的属性，例如:

I'm not the best programmer, in fact I'm no programmer at all, I can handle HTML and CSS but anything more advanced is beyond me. I've implemented jCapSlide on a website, and it works fine, however, each of the images has to have it's own attributes, like so:

    <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>

很明显，这会创建很多冗余代码，因此会增加加载时间(并且每有一点帮助)，因此我正在寻求有关如何减少这种情况的信息.我已经尝试过了:

Obviously this creates a lot of redundant code, therefore loading time (and every little helps), so I'm after info on how to reduce this. I've tried this:

    <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>

两者都不起作用.任何建议表示感谢！

Neither of which work. Any suggestions gratefully appreciated!

推荐答案

$("[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/

This will select all elements with ids that start with "capslide_img_cont". Here is a link to the jQuery selectors documentation where you can see all the different ways to select objects: http://api.jquery.com/category/selectors/

同样，您的第一次尝试也很接近，但这是正确的含义:

Also you were close with your first try but here is the proper implimentation:

$("#capslide_img_cont, #capslide_img_cont2, #capslide_img_cont3,...")

如果您担心加载时间，建议您将所有"capslide_img_cont"元素放入具有ID的div中，然后使用类似这样的选择器(假设"capslide_img_count"元素是img标签):

If you are worried about loading time I would recommend putting all of your "capslide_img_cont" elements into a div with an id, then using a selector like this (assuming the "capslide_img_count" elements are img tags):

$('#capslide_img_container').find('img').capslide...

这是一个快速选择器，它查找具有'capslide_img_container'id的单个元素，然后查找其中的所有img标签，而我的[id ^ ='capslide_img_cont']示例搜索页面上的每个id(一个类基于选择器的内容也会搜索整个页面.

This is a fast selector that finds the single element with the 'capslide_img_container' id and then finds all the img tags within it, whereas my example of [id^='capslide_img_cont'] searches every id on the page (a class-based selector also searches the whole page).

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>

这篇关于jQuery jCapSlide实现-具有相同属性的多个元素，如何执行Javascript数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！