php - 通过 jQuery 过滤图像集合

Question

我已经构建了一个 DOM ，其中包含 foreach 循环来创建图像列表，如下所示:

@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;
});

问题:过滤此内容的正确方法是什么，以便在单击 order # 链接时仅显示以 order#_ 开头的图像(无需重新加载页面)。

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));