2

我已经为每个循环构建了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;
});

问题：过滤此内容的正确方法是什么，以便在单击订单# 链接时仅显示以 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>
4

2 回答 2

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));
于 2013-07-22T01:27:39.327 回答
0

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

$('.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');
于 2013-07-22T01:31:36.103 回答