Flexslider 在过滤代码中不起作用

Question

我知道我的问题和其他人很相似，但过滤代码不同。

我的问题：

对于“Category 1”，flexslider 工作正常，但是一旦我单击“Category 2”，flexslider 就无法工作。检查源代码后，幻灯片具有内联样式 width="0px"。

我已经参考了一些其他解决方案并在我这边应用了它，但不起作用。

“类别 1”

点击“类别 2”

我该怎么做才能让它工作？希望大家能给我一些建议。谢谢！

var selCatId = null;
var pageLength = 8;

// Filters.
$('div.filter').on('click','a',function(e) {

    e.preventDefault();

    // Get the category id from the href attribute.
    selCatId = $(this).attr('href').substring(1);
    
    // Create pagination.
    var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length / pageLength),
        pages = [];
    
    // Create and show page numbers.
    for (var i=1; i<=nPages; i++)
        pages.push('<a href="#">'+i+'</a>');
    $('div.ctrl-nav').html(pages.join(''));
    
    // Activate page number selection.
    $('div.ctrl-nav a').click(function(e) {
    
        e.preventDefault();
    
        var pageInit = (parseInt($(this).text())-1)*pageLength;
        
        $('div#item-wrapper ul.items li').hide()
                                         .filter('.'+selCatId)
                                         .slice(pageInit,pageInit+pageLength)
                                         .show();
        
        // Mark the active page.
        $('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected');
    });
    
    // Show first page of the selected category.
    $('div.ctrl-nav a:first').trigger('click');
});

// Show 'Category 1' when page loads.
$('div.filter a:first').trigger('click');

$(window).load(function(){
  $('#carousel').flexslider({
	animation: "slide",
	controlNav: false,
	animationLoop: false,
	slideshow: false,
	itemWidth: 210,
	itemMargin: 5,
	asNavFor: '#slider'
  });

  $('#slider').flexslider({
	animation: "slide",
	controlNav: false,
	animationLoop: false,
	slideshow: false,
	sync: "#carousel",
	start: function(slider){
	  $('body').removeClass('loading');
	}
  });
  
  $('#carousel1').flexslider({
	animation: "slide",
	controlNav: false,
	animationLoop: false,
	slideshow: false,
	itemWidth: 210,
	itemMargin: 5,
	asNavFor: '#slider1'
  });

  $('#slider1').flexslider({
	animation: "slide",
	controlNav: false,
	animationLoop: false,
	slideshow: false,
	sync: "#carousel1",
	start: function(slider){
	  $('body').removeClass('loading');
	}
  });
});

div.ctrl-nav a {
      padding: 5px;
      margin-right: 2px;
      color: white;
      background: black;
    }

    div.ctrl-nav a.selected {
      background: red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="http://flexslider.woothemes.com/css/flexslider.css" rel="stylesheet"/>
    <script src="http://yourjavascript.com/110250337118/jquery-flexslider.js"></script>

<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>

<div id="item-wrapper">
	<ul class="items">
		<li class="category-1">
			<section class="slider">
				<div id="slider" class="flexslider">
					<ul class="slides">
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
					</ul>
				</div>
				<div id="carousel" class="flexslider">
					<ul class="slides">
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
					</ul>
				</div>
			</section>
		</li>
		<li class="category-1">item 2</li>
		<li class="category-1">item 3</li>
		<li class="category-1">item 4</li>
		<li class="category-1">item 5</li>
		<li class="category-1">item 6</li>
		<li class="category-2">
			<section class="slider">
				<div id="slider1" class="flexslider">
					<ul class="slides">
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
					</ul>
				</div>
				<div id="carousel1" class="flexslider">
					<ul class="slides">
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
						<li><img src="http://responsiveslides.com/1.jpg" /></li>
					</ul>
				</div>
			</section>
		</li>
		<li class="category-2">item 8</li>
		<li class="category-2">item 9</li>
		<li class="category-2">item 10</li>
		<li class="category-2">item 11</li>
		<li class="category-2">item 12</li>
		<li class="category-1">item 13</li>
		<li class="category-1">item 14</li>
		<li class="category-2">item 15</li>
	</ul>

	<div class="ctrl-nav">
		<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
	</div>
</div>

Answer 1

我在您的 html 代码中发现了一些问题。即两个 id 同名（id="slider" 和 id="carousel"）只需更新它 slider1 和 carousel1

我认为你的问题已经解决了。

<div id="slider" class="flexslider">

<div id="carousel" class="flexslider">

固定的 html 代码

<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>

<div id="item-wrapper">
    <ul class="items">
        <li class="category-1">
            <section class="slider">
                <div id="slider" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                    </ul>
                </div>
                <div id="carousel" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                    </ul>
                </div>
            </section>
        </li>
        <li class="category-1">item 2</li>
        <li class="category-1">item 3</li>
        <li class="category-1">item 4</li>
        <li class="category-1">item 5</li>
        <li class="category-1">item 6</li>
        <li class="category-2">
            <section class="slider">
                <div id="slider1" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                    </ul>
                </div>
                <div id="carousel1" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                    </ul>
                </div>
            </section>
        </li>
        <li class="category-2">item 8</li>
        <li class="category-2">item 9</li>
        <li class="category-2">item 10</li>
        <li class="category-2">item 11</li>
        <li class="category-2">item 12</li>
        <li class="category-1">item 13</li>
        <li class="category-1">item 14</li>
        <li class="category-2">item 15</li>
    </ul>

    <div class="ctrl-nav">
        <a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
    </div>
</div>

如下所示相对更新您的 JavaScript 代码

$(window).load(function(){
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
  
  $('#carousel1').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider1'
  });

  $('#slider1').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel1",
    start: function(slider1){
      $('body').removeClass('loading');
    }
  });
});

Answer 2

更新您的 JavaScript。它解决了你的问题。
jsfiddel link

var selCatId = null;
var pageLength = 8;

// Filters.
$('div.filter').on('click','a',function(e) {

    e.preventDefault();

    // Get the category id from the href attribute.
    selCatId = $(this).attr('href').substring(1);
    // Create pagination.
    var nPages = Math.ceil($('div#item-wrapper ul.items  li.'+selCatId).length / pageLength),
        pages = [];

    // Create and show page numbers.
    for (var i=1; i<=nPages; i++)
        pages.push('<a class="'+i+'" href="#">'+i+'</a>');
    $('div.ctrl-nav').html(pages.join(''));

    // Activate page number selection.
    $('div.ctrl-nav a').click(function(e) {
        e.preventDefault();

        var pageInit = (parseInt($(this).text())-1)*pageLength;

        $('div#item-wrapper ul.items > li').hide();
        //$('div#item-wrapper ul.items > li.'+selCatId)
        $('div#item-wrapper ul.items > li.'+selCatId).slice(pageInit,pageInit+pageLength).show();;

        // Mark the active page.
        $('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected');
    });

    // Show first page of the selected category.
    $('div.ctrl-nav a:first').trigger('click');
    first(selCatId.split('-')[1]);
});

// Show 'Category 1' when page loads.
$('div.filter a:first').trigger('click');

function first(id){
    $('#carousel'+id).flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'+id
    });

    $('#slider'+id).flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel"+id,
        start: function(slider){
            $('body').removeClass('loading');
        }
    });
};

还有 HTML

<div class="filter">
    <a  href="#category-1">category 1</a>
    <a  href="#category-2">category 2</a>
    <a  href="#category-3">category 3</a>
</div>

<div id="item-wrapper">
    <ul class="items">
        <li class="category-1">
            <section class="slider">
                <div id="slider1" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/2.jpg" /></li>
                        <li><img src="http://responsiveslides.com/3.jpg" /></li>

                    </ul>
                </div>
                <div id="carousel1" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>
                        <li><img src="http://responsiveslides.com/2.jpg" /></li>
                        <li><img src="http://responsiveslides.com/3.jpg" /></li>

                    </ul>
                </div>
            </section>
        </li>
        <li class="category-1">item 2</li>
        <li class="category-1">item 3</li>
        <li class="category-1">item 4</li>
        <li class="category-1">item 5</li>
        <li class="category-1">item 6</li>
        <li class="category-2">
            <section class="slider">
                <div id="slider2" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/2.jpg" /></li>
                        <li><img src="http://responsiveslides.com/3.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>

                    </ul>
                </div>
                <div id="carousel2" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/2.jpg" /></li>
                        <li><img src="http://responsiveslides.com/3.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>

                    </ul>
                </div>
            </section>
        </li>
        <li class="category-2">item 8</li>
        <li class="category-2">item 9</li>
        <li class="category-2">item 10</li>
        <li class="category-2">item 11</li>
        <li class="category-2">item 12</li>
        <li class="category-1">item 13</li>
        <li class="category-1">item 14</li>
        <li class="category-2">item 15</li>
        <li class="category-1">item 16</li>
        <li class="category-3">
            <section class="slider">
                <div id="slider3" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/3.jpg" /></li>
                        <li><img src="http://responsiveslides.com/2.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>

                    </ul>
                </div>
                <div id="carousel3" class="flexslider">
                    <ul class="slides">
                        <li><img src="http://responsiveslides.com/2.jpg" /></li>
                        <li><img src="http://responsiveslides.com/3.jpg" /></li>
                        <li><img src="http://responsiveslides.com/1.jpg" /></li>

                    </ul>
                </div>
            </section>
        </li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
        <li class="category-3">item 15</li>
    </ul>

    <div class="ctrl-nav">
        <a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
    </div>
</div>