使用radio和jQuery对图像进行排序

Sort images using radio and jQuery

本文关键字：排序 图像 radio jQuery 使用      更新时间：2023-09-26

简而言之，我想使用单选按钮根据图像类别对已经存在的图像进行排序-我正在尝试通过向特殊类别添加不同类别的图像来实现这一点（我不想使用任何其他插件，如sortable等）。#内部是单选按钮id，我有以下代码：

$(function(){
    var allImage = $('img.group1');
    var insideImage = $('img.group1').hasClass('insideThis');
    $('#inside').on('click' , function() {
        if ($(this).is(':checked')) {
            $(allImage).fadeOut('500');
            $(insideImage).fadeIn('500');
            }
        else {
        }
    });
});

我的html如下所示：

<ul class="thumbnails image-sort">
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1 insideThis" src="images/10.png" title="Image Title" /></a>
          </li> <!--end thumb -->  
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="images/10.jpg"><img class="group1 insideThis" src="images/10.png" title="Image Title" /></a>
          </li> <!--end thumb -->
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1" src="images/10.png" title="Image Title" /></a>
          </li> <!--end thumb -->
          <li class="col-md-2 list-inline">
            <a class="thumbnail" rel="lightbox[group]" href="img/pics/1.jpg"><img class="group1" src="images/10.jpg" title="Image Title" /></a>
          </li> <!--end thumb -->   
        </ul><!--end thumbnails -->

结果是当点击单选按钮时，所有的图像都会淡出，但这个具有类insideThis的图像不想显示。我尝试了addClass、hidden和removeClass、Hidden等，但没有结果。有什么建议吗？

jQuery的hasClass()返回布尔值，而不是元素，您可能希望选择具有类的元素 
var insideImage = $('img.group1.insideThis');

或者，由于您已经有了一个图像集合，您可以在不进行另一个DOM查找的情况下对它们进行过滤

var allImage = $('img.group1');
var insideImage = allImage.filter('.insideThis');
相关文章：