javascript - 是否可以在 flexslider 中再添加一个选择器？

Question

我想知道，是否可以向 Wootheme 的 flexslider 添加另一个选择器？在不同的页面上，我对幻灯片使用不同的样式，这就是为什么我想向 $.flexslider.defaults 添加如下内容:

selector1:".my_slides > li",

到flexslider中的选择器，不删除默认值

selector:".slides > li".  

我尝试做类似的事情

selector:".slides > li", ".my_slides > li", 

但它不起作用。

这是我使用 .slides 和 .my_slides 的代码(我不知道是否有区别，但我在 Wordpress 中使用它):

/* *********** (12) Display Post Format ******** */

function swm_display_post_format() {

    $format = get_post_format();

    if(empty($format)) {
        $format = 'standard';
    }
    if( $format == 'standard' || $format == 'gallery' || $format == 'image' || $format == 'video' ) {

        get_template_part( 'includes/' . $format );
    }
}



/* ************* (13) Blog Gallery Slider ************* */

if ( !function_exists( 'swm_blog_gallery' ) ) {
    function swm_blog_gallery($postid, $image_size) { ?>
        <script type="text/javascript">
            jQuery(document).ready(function($){

                if ( $.browser.msie ){
                    if($.browser.version == '8.0') {
                         $("#flex-<?php echo $postid; ?>").flexslider({
                            slideshow: false,
                            controlNav: true,
                            smoothHeight: true,
                            start: function(slider) {
                                slider.container.click(function(event) {
                                    if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                                });
                            }
                        });
                    }
                }


               $("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
                $("#flex-<?php echo $postid; ?>").flexslider({
                    slideshow: false,
                    controlNav: true,
                    smoothHeight: true,
                    start: function(slider) {
                        slider.container.click(function(event) {
                            if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                        });
                    }
                });
               });
            });
        </script>
        <?php

        $gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
        $meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');

        echo "<div class='pf_featured_img pf_l_img'><div class='swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";


        if ( $gal_images ) {
            echo "<ul class='slides'>";

            foreach ( $gal_images as $gal_image ) {
               //   $swm_gal_image = "{$gal_image['url']}";
                $swm_gal_image = swm_resize($gal_image['url'], 635, 425,  $meta_gallery_img_height, true,'c',true);
                    echo "<li><img src='$swm_gal_image' alt='' /></li>";
            }
            echo '</ul>';
        }
        echo "</div></div></div>";
    }
}





/* **************** (12) Display MY Post Format **************************** */

function swm_display_my_post_format() {

    $format = 'gallery1';

    get_template_part( 'includes/' . $format );
}



/* ***********************(13) Blog MY Gallery Slider *********************** */

if ( !function_exists( 'swm_my_blog_gallery' ) ) {
    function swm_my_blog_gallery($postid, $image_size) { ?>
        <script type="text/javascript">
            jQuery(document).ready(function($){

                if ( $.browser.msie ){
                    if($.browser.version == '8.0') {
                        $("#flex-<?php echo $postid; ?>").flexslider({
                            slideshow: true,
                            controlNav: true,
                            smoothHeight: true,
                            start: function(slider) {
                                slider.container.click(function(event) {
                                    if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                                });
                            }
                        });
                    }
                }


                $("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
                    $("#flex-<?php echo $postid; ?>").flexslider({
                        slideshow: true,
                        controlNav: true,
                        smoothHeight: true,
                        start: function(slider) {
                            slider.container.click(function(event) {
                                if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                            });
                        }
                    });
                });
            });
        </script>
        <?php

        $gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
        $meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');

        echo "<div class='pf_featured_img pf_l_img'><div class='my_swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";

        if ( $gal_images ) {
            echo "<ul class='my_slides'>";

            foreach ( $gal_images as $gal_image ) {
                //  $swm_gal_image = "{$gal_image['url']}";
                $swm_gal_image = swm_resize($gal_image['url'], 510, 410,  $meta_gallery_img_height, true,'c',true);
                echo "<li><img src='$swm_gal_image' alt='' /></li>";
            }
            echo '</ul>';
        }
        echo "</div></div></div>";
    }
}

Answer 1

试试这个:

selector: ".slides > li, .my_slides > li"

此语法:

$('selector1', 'selector2')

选择与selector1匹配的元素，但仅选择那些与selector2匹配的元素的后代。

此语法:

$('selector1, selector2')

选择与selector1匹配的元素和与selector2匹配的元素。我认为该插件会以同样的方式工作。