通过jQuery过滤图像集合

Question

我为每个循环都构建了一个DOM ，以创建图像列表，如下所示：

@foreach ($imageAsString as $key=>$image) 
<li> <div id="{{$key}}" class="thumbnail"><a href="#"><img data-size="1.1" src="data:image/png;  base64,<?php echo base64_encode($image); ?>" alt="image1"/></a>
        </div></li>  
        @endforeach

使用Laravel 3框架从PHP接收图像作为数组。 图像的原始文件名用作键，而值则用于显示图像。

现在，我想做的是基于单击的链接过滤这些图像，以仅显示与单击的链接有关的图像（基于订单号），如下所示：

HTML的“

<li id="order-id" class="folders"> <a href="#">Folders</a>
@foreach($orders_cloud as $order)
    <ul id ="orders">
        <li value="{{$order}}" data-rel="{{$order}}" id="{{$order}}">
            <a href="#" value="{{$order}}">
                <span class="number"></span>
                Order #{{ $order }}
            </a>
        </li>

JS->

    $('#orders li').click(function() {

    var order = $(this).attr('value');

    $('.column2 .title h2').text('Order #' + order).show();

        $('.column2 .list1 .thumbnail').filter(function() {
   $(this).attr('id').match(/^order/)
        }).show();
    return false;
});

问题：过滤此内容的正确方法是什么，以便在单击“订单号”链接时仅显示以“订单号__”开头的图像（无需重新加载页面）。

HTML

<li>
    <div id="14179_low_folder001_00006a.jpg" class="thumbnail">
        <a href="#">
            <img data-size="1.1" id="14179_low_folder001_00006a.jpg"
                    src="data:image/png;base64,/" alt="image1"/>
        </a> 
        <div class="overlay">
            <div class="inner"> 
                <span class="checkbox"> 
                    <input type="checkbox" /> 
                </span> 
            </div>
        </div> 
        <span class="checkbox">
            &nbsp;
        </span> 
    </div>
</li>

Answer 1

您可以直接使用此选择器

$('.column2 .list1 .thumbnail[id^='+ order + '\\#]')

您需要将var order附加到选择器中，以将其替换为当前所选项目的值。

JS

$('#orders li').click(function () {

    var order = $(this).attr('value');

    $('.column2 .title h2').text('Order #' + order).show();

    $('.column2 .list1 .thumbnail[id^='+ order + '\\#]').show();

    return false;
});

另外，如果您想使用正则表达式

.match(/^order/)

应该是

.match(new Regex("^" + order));

Answer 2

您必须返回用于过滤对象的值：

$('.column2 .list1 .thumbnail').filter(function() {
    return this.id.indexOf(order) === 0;
}).show();

此外， value对于<a>和<li>元素不是有效的属性。 如果您绝对必须将这些数据存储在HTML中，请使用data-属性：

data-order="foo"

并使用.data()获取它：

var order = $(this).data('order');