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-＆GT;

<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-＆GT;

    $('#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');

通过jQuery过滤图像集合

2 个答案: