javascript - Flexslider 在过滤代码中不起作用

Question

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

我的问题:

对于“类别 1”，flexslider 工作正常，但一旦我点击“类别 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

更新您的 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>