2

次DOMのような画像のリストを作成するために、 for each ループを使用して を作成しました。

@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

フレームワークを使用して、画像を PHP から配列として受け取りLaravel 3ます。画像の元のファイル名がキーとして使用され、値は画像を表示するために使用されます。

今私がやろうとしているのは、クリックされたリンクに関連する画像のみを表示するためにクリックされたリンクに基づいてこれらの画像をフィルタリングすることです(注文番号に基づいて)。

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>
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 に答える