Question

我们在页面上有100多张图片。每张图片都有3个参数：

年（2007 | 2008 | 2009）
颜色（红色|黄色|蓝色）
类型（肖像|全景）

如何在没有页面重新加载的情况下使用此参数（我想看蓝色+全景+ 2007）对页面上的图像进行排序 - 只选择正确的图像？

P.S。我不知道如何在不使用外部文件的类别=“2009黄色蓝色肖像”的类别中签名参数

Answer 1

我将假设以下标记...您可以根据自己的需要进行调整：

<div id="images">
  <div>
    <img src="..." />
    <em>Year: </em><span class="year">2007</span>
    <em>Color: </em><span class="color">red</span>
    <em>Type: </em><span class="type">portrait</span>
  </div>
  <div>
    <img src="..." />
    <em>Year: </em><span class="year">2008</span>
    <em>Color: </em><span class="color">yellow</span>
    <em>Type: </em><span class="type">panoram</span>
  </div>
</div>

然后这是你需要的jQuery：

function sortBy(field) {
    var container = $('#images');
    // get a real array of the image divs
    var imgDivList = container.children().get();
    // Put them into the correct order based on the chosen field
    imgDivList.sort(function (a, b) {
        var aText = $(a).children('.' + field).text();
        var bText = $(b).children('.' + field).text();
        if (aText < bText) {
            return 1;
        }
        if (aText > bText) {
            return -1;
        }
        if (aText == bText) {
            return 0;
        }
    });
    // Append them back to the original container
    container.append(imgDivList);
}

要进行过滤，请执行以下操作：

function filter(field, value) {
    var imgDivList = $('#images').children();
    imgDivList.each(function (index, element) {
        if ($(element).children('.' + field).text() == value) {
            $(element).show();
        } else {
            $(element).hide();
        }
    });
}

Answer 2

这是一般的想法。您需要创建一个真正的图像数组，然后使用JavaScript array.sort和自定义函数对它们进行排序。一旦完成，你可以append他们回到DOM，他们会重新安排自己。

arrImages = $('img').get(); // need a true array
arrImages.sort(function(a,b) {
    // write your own sort function here using your parameters
    // return a negative number to sort a before b, positive to sort b before a
});
$.each(arrImages, function(i,el) {
    $('#container').append(el);
});

如何在jquery中过滤/排序图像/块？

2 个答案: