为什么Flexslider中的一个选择器工作，而第二个选择器不工作;t
Why is one of the selectors in Flexslider working and the second one isn't?
我正试图在wordpress内的Wooteme的Flexslider中使用两个选择器，因为我需要在不同页面上为幻灯片使用不同的样式。
当我把这一行添加到滑块的代码中时，
选择器：".slides>li，.my_slides>li"
.sldes>li，-工作正常，但.my_slides-不工作。
以下是滑块代码的链接：https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js
这是我使用.slides和.my_slides:的代码
/* *********** (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>";
}
}
这是在它工作的地方生成的HTML：
<div class="best_img_wrap">
<div class="best_img">
<script type="text/javascript">
jQuery(document).ready(function ($) {
if ($.browser.msie) {
if ($.browser.version == '8.0') {
$("#flex-42").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
}
}
$("#flex-42").imagesLoaded(function () {
$("#flex-42").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
});
</script>
<div class="pf_featured_img pf_l_img">
<div class="swm_slider_box">
<div class="flexslider pfi_gallery" id="flex-42" style="height: 425px;">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1;
display: block; z-index: 2;" class="flex-active-slide">
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-5-0x0_1.jpg"
draggable="false"></li><li style="width: 100%; float: left; margin-right: -100%;
position: relative; opacity: 0; display: block; z-index: 1;">
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/rp_11-0x0_1.jpg"
draggable="false"></li><li style="width: 100%; float: left; margin-right: -100%;
position: relative; opacity: 0; display: block; z-index: 1;">
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/violin-0x0_1.jpg"
draggable="false"></li></ul>
<ol class="flex-control-nav flex-control-paging">
<li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li></ol>
<ul class="flex-direction-nav">
<li><a href="#" class="flex-prev">Previous</a></li><li><a href="#" class="flex-next">
Next</a></li></ul>
</div>
</div>
</div>
</div>
</div>
这里是生成的HTML，它不起作用：
<div class="my_post_wrapper">
<p>
</p>
<div class="caty_name">
<a rel="category" title="View all posts in Crack Repairs" href="http://localhost/inst_new/?cat=8">
Crack Repairs</a></div>
<p>
</p>
<div class="my_post_title">
<h3>
<a title="Permanent Link to Recent Post 3 + Crack Repair" href="http://localhost/inst_new/?p=64"
class="service_single_title"></a>
<div class="caty_title">
<a title="Permanent Link to Recent Post 3 + Crack Repair" href="http://localhost/inst_new/?p=64"
class="service_single_title">Recent Post 3 + Crack Repair</a></div>
</h3>
</div>
<!-- .post title -->
<div class="my_post_content featured_post">
<script type="text/javascript">
jQuery(document).ready(function ($) {
if ($.browser.msie) {
if ($.browser.version == '8.0') {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
}
}
$("#flex-64").imagesLoaded(function () {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
});
</script>
<div class="pf_featured_img pf_l_img">
<div class="my_swm_slider_box">
<div class="flexslider pfi_gallery" id="flex-64">
<ul class="my_slides">
<li>
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-1-0x0_1.jpg"></li><li>
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-71-0x0_1.jpg"></li></ul>
</div>
</div>
</div>
<p>
<a class="white_button" href="http://localhost/inst_new/?p=64">Read more >></a></p>
</div>
</div>
默认情况下，Flexslider在UL上查找类"幻灯片"。第一个例子就是这样，第二个例子是"my_slides"。
您可以在第二个滑块UL上更改类，也可以在初始化flexslider时指定选择器，如下所示：
$("#flex-64").imagesLoaded(function () {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
selector: '.my_slides > li',
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
编辑：我想我漏掉了你的一个问题。如果我理解正确的话，你试图为Flexslider提供两个不同的选择器，让它潜在地发挥作用？这应该可以工作，但它没有在代码中表示出来。我是不是错过了什么？
相关文章：
- 为什么不'在JQuery中找到第二个css选择器的工作
- jQuery选择器无法正常工作
- JavaScriptDOM正常工作时JQuery选择器不工作
- JS-颜色选择器只有第一个工作
- 取消光谱颜色选择器不工作
- 复杂选择器在jQuery 1.8中中断，但在1.7.2中工作
- jQuery选择器在脚本中不起作用，但在控制台中工作
- 当页面回发ASP.NET时，时间选择器javascript将停止工作
- 添加Jquery验证后，Jquery日期选择器无法工作
- ajax调用后$(''）选择器不工作
- jQuery类选择器工作不稳定
- jquery:非选择器工作不正常
- 为什么这个jQuery选择器工作?它基于什么
- 为什么Flexslider中的一个选择器工作，而第二个选择器不工作;t
- AngularJS UI启动日期选择器工作不正常
- 不能使jQuery动态选择器工作
- Jquery不与变量选择器工作
- 无法使引导日期选择器工作
- 让 jquery 时间选择器工作
- Javascript onchange验证使:valid和:invalid CSS选择器工作
