0

div 内の画像の数をカウントする際に問題が発生しています。

たとえば、1/4、2/4、3/4、4/4

これは私が理解しようとしている小さなコードです

//count image
var currentNum = $(this).iniShow() + 1;
var count = $(this).closest('.slideshow').find('img:first').length;
var item = $(this).closest('.slideshow').attr('id');
       $('.' + item ).html(currentNum + ' of ' + count);

これまでのHTMLコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">   </script>
</head>
<style>
.slideshow img { display: none; cursor: pointer; }
</style>
<script type="text/javascript">
jQuery(function($){
//previous slide
$('.slideshow .prev').click(function() {
    prevSlide($(this).closest('.slideshow').find('.slides'));
});
//next slide
$('.slideshow .next, .slideshow img,').click(function() {
    nextSlide($(this).closest('.slideshow').find('.slides'));
});
//initialize show
iniShow();
function iniShow() {
    // show first slide with caption
    $('.slideshow').each(function() {
        showSlide($(this).find('.slides'));
    });
}
// move previous slide 
function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
    showSlide($slides);
}
// move next slide 
function nextSlide($slides) {
    $slides.find('img:first').appendTo($slides);
    showSlide($slides);
}
// show slide with caption
function showSlide($slides) {
    var $nextSlide = $slides.find('img:first');
    //hide (reset) all slides
    $slides.find('img').hide();
    //fade in next slide
    $nextSlide.fadeIn(500);
    //show caption
    $('#caption').text($nextSlide[0].alt);
    //count image
    var currentNum = $(this).iniShow() + 1;
    var count = $(this).closest('.slideshow').find('img').length;
    $('#count').html(currentNum + ' of ' + count);
    }
});
</script>
<body>
<div class="slideshow">
<div class="slides">
    <img src="image/1a.jpg" width="500" height="500" alt="Caption 1 Image is ..." />
    <img src="image/2a.jpg" width="500" height="500" alt="Caption 2 Image is ..." />
    <img src="image/3a.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
    <img src="image/4a.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
</div>
<p id="caption"></p> / <p id="count"></p>
<div class="controls">
<a class="prev" href="javascript:void(0);">Previous</a> -
<a class="next" href="javascript:void(0);">Next</a>
</div>
</div>
</body>
</html>

任意の提案をいただければ幸いです。また、この問題の解決に近づいているかどうかも知りたいです。ありがとう。

4

4 に答える 4

4

これを使っているようです

.find('img:first').length;

そのため、画像が含まれている場合、カウントは常に1になります。

代わりにこれを試してください

var count = $slides.closest('.slideshow').find('img').length;

また、これは現在の関数コンテキストでは意味がありません.. $slidesに置き換えます

于 2012-10-11T19:16:08.823 に答える
1

count をセレクターとして直接使用できます。jsfiddle の変更

為に

var item = $(this).closest('.slideshow').attr('id');
       $('.' + item ).html(currentNum + ' of ' + count);

id の div でカウントを表示したいと思いますcount。id には、.(クラス selectopr に使用される) の代わりに # を使用する必要があります。

   $('#count').html(currentNum + ' of ' + count);

変更されたコード:

var currentNum = $(this).iniShow() + 1;
var count = $(this).closest('.slideshow').find('img').length;
       $('#count').html(currentNum + ' of ' + count);
于 2012-10-11T19:13:25.687 に答える
0

これを試すことができます：

var count = $(".slides > img").size();

あなたの場合idではなく、使用する方が良いです。classだからあなたdivはそのようになります：

  <div id="slides">
    <img src="image/1a.jpg" width="500" height="500" alt="Caption 1 Image is ..." />
    <img src="image/2a.jpg" width="500" height="500" alt="Caption 2 Image is ..." />
    <img src="image/3a.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
    <img src="image/4a.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
  </div>
...

そしてあなたのjqueryコード：

var count = $("#slides > img").size();

例を参照してください: jsfiddle

于 2012-10-11T19:21:04.130 に答える
0

構文は次のようにする必要があります。

var count = $('div.myDiv').find('img').size();

したがって、あなたの場合は次のようになります。

var count = $(this).closest('.slideshow').find('img').size();
于 2012-10-11T19:18:52.540 に答える