如何检测班级中的孩子数

我正在尝试创建一个无限循环的内容滑块。我目前让它循环 3 个项目，但想实现一个函数，允许它始终循环而无需更新脚本。

我想知道的是，我是否可以创建一个 if 语句，说："如果 x 大于.quote中的元素数，请执行此操作。还是我必须.quote分配给变量？

这是 JSFiddle

var x = 1;
$('.quote:nth-child(2)').hide();
$('.quote:nth-child(3)').hide();
$('#next').click(function(e){
    e.preventDefault();
    if(x === 3){
        $('.quote:nth-child(' + x + ')').hide();
        x = 1;
        $('.quote:nth-child(' + x + ')').show();
    }
    else{
        $('.quote:nth-child(' + x + ')').hide();
        x++;
        $('.quote:nth-child(' + x + ')').show();
    }
});
$('#prev').click(function(e){
    e.preventDefault();
    if(x === 1){
        $('.quote:nth-child(' + x + ')').hide();
        x = 3;
        $('.quote:nth-child(' + x + ')').show();
    }
    else{
        $('.quote:nth-child(' + x + ')').hide();
        x--;
        $('.quote:nth-child(' + x + ')').show();
    }
});

"如果 x 大于 .quote 中的元素数，请执行此操作。还是我必须将 .quote 分配给变量？

没有变量

if (x > $('.quote').length) { do stuff... }

但您也可以将其分配给变量。这更有效，因为只要长度不变，您就不会一遍又一遍地执行长度计算。

var quote = $('.quote').length;
if (x > quote) { do stuff... }

这应该为您实现无限滚动。（我在 next/prev 按钮中所做的是，首先隐藏当前对象，然后相应地显示 x+1/x-1 对象。但是在这两者之间，我进行了检查以重置x，如果达到对象计数或0的限制，分别在下一个或上一个按钮中。

$(document).ready(function() {
  console.log('jQuery started.');
  var x = 1;
  $('.quote:nth-child(2)').hide();
  $('.quote:nth-child(3)').hide();
  $('#next').click(function(e) {
    e.preventDefault();
    $('.quote:nth-child(' + x + ')').hide();
    if (x > $('.quote').length) {
         x=1;
    }
    else {
        x++;
    }
    $('.quote:nth-child(' + x  + ')').show();
  });
  $('#prev').click(function(e) {
    e.preventDefault();
    $('.quote:nth-child(' + x + ')').hide();
    if (x == 0) {
         x=1;
    }
    else {
        x--;
    }
    $('.quote:nth-child(' + x  + ')').show();
  });
});

https://jsfiddle.net/rvm1Lx4x/

或

$(document).ready(function() {
  console.log('jQuery started.');
  $('.quote').hide();
  
    $('.quote:first').show().addClass("first");
    $('.quote').last().addClass("last");
  $('#next').click(function(e) {
    e.preventDefault();
		var active = $('.quote:visible');
    
    if($(active).hasClass("last")){
    	$('.quote.first').show();
      $(active).hide();
    }
    else{
      $(active).hide().next().show();
    }
    
  });
  $('#prev').click(function(e) {
    e.preventDefault();
		var active = $('.quote:visible');
    
    if($(active).hasClass("first")){
    	$('.quote.last').show();
      $(active).hide();
    }
    else{
      $(active).hide().prev().show();
    }
    
  });
});

html,
body {
  margin: 0 auto;
}
.slider {
  padding: 10px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 28px;
}
.container {
  max-width: 800px;
}
p {}
h3 {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}
.nav {
  margin-top: 30px;
}
#prev {}
#prev:hover {
  opacity: 0.5;
}
#next {
  margin-left: 60px;
}
#next:hover {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="slider">
    <div class="container">
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum, erat sed aliquet vestibulum, est sapien pharetra mi, nec scelerisque eros justo et mauris. Aliquam erat volutpat. Phasellus sagittis augue varius enim cursus tempus. Praesent
          lacinia a dui non hendrerit. Suspendisse sit amet euismod enim. Sed suscipit ultrices imperdiet.</p>
        <h3>John Doe</h3>
      </div>
      <div class="quote">
        <p>Morbi consectetur augue sit amet tristique dapibus. Mauris convallis arcu nec velit commodo congue. Pellentesque ac lectus a quam tristique lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        <h3>John Doe</h3>
      </div>
      <div class="quote">
        <p>In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
    </div>
    <div class="nav">
      <a id="prev" href="#">Previous</a>
      <a id="next" href="#">Next</a>
    </div>
  </div>
</body>

试试这个，它使用模算术自动从最后一项换行到第一项（反之亦然），而无需使用任何if条件或重复逻辑。

// current position, and cache of child nodes
var x = 0;
var $q = $('.container').children('.quote');
// increase or decrease X, wrapping within the number of elements
$('#next').on('click', function() {
    $q.eq(x).hide();
    x = (x + 1) % $q.length;              // increase x, with wrapping
    $q.eq(x).show();
});
$('#prev').on('click', function() {
    $q.eq(x).hide();
    x = (x + $q.length - 1) % $q.length;  // decrease x, with wrapping
    $q.eq(x).show();
});

x = x + $q.length - 1 中的额外加法是为了确保 x 永远不会变为负数。

请参阅 https://jsfiddle.net/alnitak/5xfyk1e4/1/

$（'.quote'）.children（）.length;

就您而言，您的 Fiddle 现在是拥有连续滑块而不会弄乱您已经编写的大量内容的最快、最有效的方法，就是将这个小片段放在您的代码中。

setInterval(function() {$('#next').trigger("click")},3000);

$(document).ready(function() {
  console.log('jQuery started.');
  var x = 1;
  // check how many elements you have
  var n = $('.quote').length;
 
  $('.quote').not(':nth-child(0)').hide();
  $('#next').click(function(e) {
    e.preventDefault();
    // check if you reached last element
    if (x === n) {
      $('.quote:nth-child(' + x + ')').hide();
      x = 1;
      $('.quote:nth-child(' + x + ')').show();
    } else {
      $('.quote:nth-child(' + x + ')').hide();
      x++;
      $('.quote:nth-child(' + x + ')').show();
    }
  });
  $('#prev').click(function(e) {
    e.preventDefault();
    if (x === 1) {
      $('.quote:nth-child(' + x + ')').hide();
      // set to last
      x = n;
      $('.quote:nth-child(' + x + ')').show();
    } else {
      $('.quote:nth-child(' + x + ')').hide();
      x--;
      $('.quote:nth-child(' + x + ')').show();
    }
  });
  /* always loop by simply "clicking" next in case you don't need
  to start automatically */
  setInterval(function() {$('#next').trigger("click")},3000);
});

html,
body {
  margin: 0 auto;
}
.slider {
  padding: 10px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 28px;
}
.container {
  max-width: 800px;
}
p {}
h3 {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}
.nav {
  margin-top: 30px;
}
#prev {}
#prev:hover {
  opacity: 0.5;
}
#next {
  margin-left: 60px;
}
#next:hover {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="slider">
    <div class="container">
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum, erat sed aliquet vestibulum, est sapien pharetra mi, nec scelerisque eros justo et mauris. Aliquam erat volutpat. Phasellus sagittis augue varius enim cursus tempus. Praesent
          lacinia a dui non hendrerit. Suspendisse sit amet euismod enim. Sed suscipit ultrices imperdiet.</p>
        <h3>John Doe</h3>
      </div>
      <div class="quote">
        <p>Morbi consectetur augue sit amet tristique dapibus. Mauris convallis arcu nec velit commodo congue. Pellentesque ac lectus a quam tristique lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        <h3>John Doe</h3>
      </div>
      <div class="quote">
        <p>In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
      
      <div class="quote">
        <p>No1 In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
      
      <div class="quote">
        <p>No2 In velit lorem, lobortis ut sem non, pharetra porta leo. Donec odio leo, finibus quis suscipit eu, vulputate vitae elit. Ut sodales ultrices malesuada. Sed luctus porta lorem a sodales. Vivamus bibendum elit et augue sagittis, ac convallis massa
          suscipit.
        </p>
        <h3>John Doe</h3>
      </div>
      
    </div>
    <div class="nav">
      <a id="prev" href="#">Previous</a>
      <a id="next" href="#">Next</a>
    </div>
  </div>
</body>

相关内容

最新更新

热门标签：