如何使用 jQuery 更改 Javascript 数组中第一个元素的类？

Question

我想创建带有缩略图的简单产品滑块。虽然可能有超过 3 个缩略图，但我只想显示其中的 3 个。通过单击“更多”按钮，我的目标是隐藏第一张已经可见的图像，并通过更改它们的类从隐藏图像中显示一个。

在 hiddenImages[0] 之前代码运行良好。 Firefox 控制台给出以下错误：“TypeError: hiddenImages[0] is undefined”

我做错了什么？

// All images
var images = $('[data-image]');

// Click for more images
var more = $('.more');


// Add show class to all images
images.each(function(index, element){$(this).parent().addClass('visible')})

// Hide images begining from 4th image
images.each(function(index, element){if($(this).data('image') >= 4)
{$(this).parent().removeClass('visible').addClass('hidden')} })

// Show big image when clicking thumbnail
images.each( function(index, element){
$(this).click(function(){ $('#pic img').attr('src', $(this).attr('src')) }) })


// Hide 1st from visible images and show first from hidden images
more.on('click', function(){
// Find all hidden images and remove visible class from first one
hiddenImages = images.hasClass('hidden');
hiddenImages[0].removeClass('visible').addClass('hidden');
})

#pic {
  width: 300px;
  height: 300px;
  border: 1px solid  #ccc;
  margin-right: 5px;
  float: left;
}

.thumbnails {
  height: 300px;
  width: 50px;
  padding:0; 
  margin:0;
  margin-right: 10px;
  float: left;

}

.thumbnails li {
  display: inline;
  list-style: none;
  float: left;
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  border:1px solid #ccc;
  text-align: center;
}

.thumbnails li img {
  width: 70px;
  height: 70px;
  cursor: pointer;
}

.more {
  display: inline;
  list-style: none;
  float: left;
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  border:1px solid #ccc;
  text-align: center;
}

.hidden {display: none!important;} 

.visible {display: block!important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
	<div id="pic">
	<img src="https://placeimg.com/300/300/nature">
	</div>

	<ul class="thumbnails">
		<li><img data-image="1" src="https://placeimg.com/300/300/nature"></li>
		<li><img data-image="2" src="https://placeimg.com/300/300/any"></li>
		<li><img data-image="3" src="https://placeimg.com/300/300/animals"></li>
		<li><img data-image="4" src="https://placeimg.com/300/300/sepia"></li>
		<li><img data-image="5" src="https://placeimg.com/300/300/grayscale"></li>
		<li><img data-image="6" src="https://placeimg.com/300/300/tech"></li>
		<li class="more">MORE</li>
	</ul>

</div>

Answer 1

images.hasClass('hidden') 不会做你认为它会做的事。查看the hasClass() docs。它返回一个布尔值。

假设您正在尝试获取该类的对象数组，您想使用find()

您还需要确认images.find('.hidden') 的结果返回了一个预期长度的数组（下面没有演示）。

more.on('click', function(){
    // Find all hidden images and remove visible class from first one
    hiddenImages = images.filter("[class~='hidden']");
    hiddenImages[0].removeClass('visible').addClass('hidden');
})

这里有一个简单的例子，用 div 来说明：

let divsWithClass = $("div").filter("[class~='hidden']")
alert(`divs with 'hidden' class: ${divsWithClass.length}`);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="foo1"></div>
<div class="foo1"></div>
<div class="foo1"></div>

Answer 2

正如在上面的答案中已经指出的那样，问题是hasClass() 返回一个布尔值而不是一组 jQuery 元素，随后即使 hasClass() 确实返回了一组 jQuery 元素，您的下一行代码也会失败，因为之所以这样做是因为hiddenImages[0] 不是 jQuery 对象。下面是一个示例，说明如何拥有 3 个活动图像并交换类：

$(function() {
  
    // All images
    var images = $('[data-image]'),
      // Click for more images
      more = $('.more');
  
    // Add show class to all images
    images.each(function(index, element) {
      $(this).parent().addClass('visible')
    })
  
    // Hide images begining from 4th image
    images.each(function(index, element) {
      if ($(this).data('image') >= 4) {
        $(this).parent().removeClass('visible').addClass('hidden')
      }
    })
  
    // Show big image when clicking thumbnail
    images.each(function(index, element) {
      $(this).click(function() {
        $('#pic img').attr('src', $(this).attr('src'))
      })
    })
  
  
    // Hide 1st from visible images and show first from hidden images
    var hiddenElemInfoObj = {
        idx: $('.thumbnails > li.hidden').first().index(),
        initialIdx: $('.thumbnails > li.hidden').first().index(),
        lengthOfElems: $('.thumbnails > li.hidden').length - 1 // To make length zero based 
      },
      visibleElemInfoObj = {
        idx: $('.thumbnails > li.visible').first().index(),
        initialIdx: $('.thumbnails > li.visible').first().index(),
        lengthOfElems: $('.thumbnails > li.visible').length - 1 // To make length zero based
      }
  
  
    more.on('click', function() {
  
      $thumbnails = $('.thumbnails');
  
      if (parseInt(hiddenElemInfoObj['idx']) > (parseInt(hiddenElemInfoObj['initialIdx']) + parseInt(hiddenElemInfoObj['lengthOfElems']))) {
        hiddenElemInfoObj['idx'] = $('.thumbnails > li.hidden').first().index();
        hiddenElemInfoObj['initialIdx'] = $('.thumbnails > li.hidden').first().index();
      }
  
      if (parseInt(visibleElemInfoObj['idx']) > (parseInt(visibleElemInfoObj['initialIdx']) + parseInt(visibleElemInfoObj['lengthOfElems']))) {
        visibleElemInfoObj['idx'] = $('.thumbnails > li.visible').first().index();
        visibleElemInfoObj['initialIdx'] = $('.thumbnails > li.visible').first().index();
      }
  
      $thumbnails
        .children('li')
        .eq(hiddenElemInfoObj.idx)
        .removeClass('hidden')
        .addClass('visible');
  
      $thumbnails
        .children('li')
        .eq(visibleElemInfoObj.idx)
        .removeClass('visible')
        .addClass('hidden');
  
      hiddenElemInfoObj['idx'] = parseInt(hiddenElemInfoObj['idx']) + 1;
      visibleElemInfoObj['idx'] = parseInt(visibleElemInfoObj['idx']) + 1;
  
    });
  
  
  });

#pic {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  margin-right: 5px;
  float: left;
}

.thumbnails {
  height: 300px;
  width: 50px;
  padding: 0;
  margin: 0;
  margin-right: 10px;
  float: left;
}

.thumbnails li {
  display: inline;
  list-style: none;
  float: left;
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  text-align: center;
}

.thumbnails li img {
  width: 70px;
  height: 70px;
  cursor: pointer;
}

.more {
  display: inline;
  list-style: none;
  float: left;
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  text-align: center;
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="holder">
		<div id="pic"><img src="https://placeimg.com/300/300/nature"></div>
		<ul class="thumbnails">
			<li><img data-image="1" src="https://placeimg.com/300/300/nature"></li>
			<li><img data-image="2" src="https://placeimg.com/300/300/any"></li>
			<li><img data-image="3" src="https://placeimg.com/300/300/animals"></li>
			<li><img data-image="4" src="https://placeimg.com/300/300/sepia"></li>
			<li><img data-image="5" src="https://placeimg.com/300/300/grayscale"></li>
			<li><img data-image="6" src="https://placeimg.com/300/300/tech"></li>
			<li class="more">MORE</li>
		</ul>
  </div>