2

一度に 1000 個以上の小さな画像をページに読み込むサイトがあります。ページにはテキストはなく、画像のみです。上部に検索バーがあり、画像をフィルタリングして、ファイル名または代替テキストに基づいて画像を返したい場合..これは可能ですか? Javascript/jQuery で? それとも別の手段？

これを実装するための助けは素晴らしいでしょう。

4

5 に答える 5

3

たとえば、写真の名前に基づいて、次のように写真を検索できます。

var photoName = "photo name";
$('img[src*="'+photoName+'"]').each(function(){
   //Do what you want with the found photos
});

編集

他の画像属性likealt またはtitle

于 2012-12-19T19:42:12.973 に答える
2

この実際の例では、jQuery のcontains セレクターを使用しています。

マークアップ:

<img alt="abc" src="def.gif" />
<img alt="bcd" src="efg.png" />
<input id="search" type="text" placeholder="Search" />
<div id="results"></div>​

JS:

$(function() {
    $('#search').change(function(){
        var s = $(this).val();
        var results = $('img[alt*="' + s + '"],img[src*="' + s + '"]');
        var output = $('<div></div>').append(results.clone());
        $('#results').text(output.html());
    });
});​

マークアップではなく結果に画像を表示する場合は、 に変更$('#results').text(output.html());し$('#results').html(output.html());ます。これには、次の検索の検索結果も含まれることに注意してください。検索結果を表示する実際の例を次に示します。

于 2012-12-19T19:51:00.907 に答える
1

以下を使用して、すべての画像要素を取得できます。

var allImages = document.getElementsByTagName('img');

srcその後、属性をチェックして一致を見つけることができます。

var i;
var search = 'test';
var matches = [];
for (i = 0; i < allImages.length; i+) {
    if (allImages[i].src.indexOf(search) > -1) {
        matches.push(allImages[i]);
    }
}

これで、一致の配列ができました。

このようにどこかに書くことができます...

var searchResults = document.getElementById('results');
for (i = 0; i < matches.length; i++) {
    searchResults.appendChild(matches[i]);
}

を使用する必要はありません。本当に必要な場合はsrc、独自のタグを含め、画像の任意の属性を使用できます。data-keywords複数の単語を検索として入力できるようにすると、物事をより賢くすることができます。

以下は、任意の順序で表示される複数の単語を処理する簡単な例です。

var i;
var search = 'test multi word';
var searchTerms = search.split(' ');
var matches = [];

var isMatch = function (haystack, needles) {
    for (var i = 0; i < needles.length; i++) {
        if (haystack.indexOf(needles[i]) === -1) {
            return false;
        }
    }
    return true;
}

for (i = 0; i < allImages.length; i+) {
    if (isMatch(allImages[i].src, searchTerms)) {
        matches.push(allImages[i]);
    }
}
于 2012-12-19T19:40:24.110 に答える
0

HTML の構造によって異なります。

画像が IMG tags() に直接含まれている場合は、以下のようなコードを使用して見つけることができます:

$("img").each(function(){
     console.log("ALT: " + $(this).attr("alt"));
     console.log("FILE PATH AND NAME: " + $(this).attr("src"));
});

ブラウザで画像を見るときはいつでも、それは必ずしも IMG タグではないことに注意してください。画像は、たとえば、CSS クラスの背景にすることができます。

于 2012-12-19T20:28:20.573 に答える