1

内部サイト設定の事情により、ローカルページから一連の画像を解析し、name属性を記事名と照合して画像情報を別のローカルページに渡そうとしています。画像のsrc属性とclass属性を探しています。

2つのページは同じドメインにありますが、1つのページには一連の画像が含まれ、もう1つのページにはJSとCSSの組み合わせでスタイル設定される標準のページレイアウトが含まれています。ページを含む画像は、一連の画像のリポジトリのようなものです。

注：サーバー側を使用すれば、これは非常に簡単に実現できることはわかっていますが、このセットアップの状況により、フロントエンドで何かを考え出す必要があります。

最終結果は、各記事リストの横に配置されたリポジトリページからのそれぞれの画像を含むメインページのリストになります。

これが私がこれまでに持っているものです：

<!-- HTML ON IMAGE REPO PAGE -->
<img src="/path/to/my/image/repo/image_01.jpg" name="article_01" />
<img src="/path/to/my/image/repo/image_02.gif" name="article_02" />
<img src="/path/to/my/image/repo/image_03.png" name="article_03" />
<img src="/path/to/my/image/repo/image_04.jpg" name="article_04" />
<img src="/path/to/my/image/repo/image_05.gif" name="article_05" />
<img src="/path/to/my/image/repo/image_06.jpg" name="article_06" />

<!-- HTML ON MAIN PAGE -->
... HTML code blah blah blah ...
<div class="imageCnt">
    <div class="listItem"><a href="/path/to/my/article_01.html">Cool Article 1</a></div>
    <div class="listItem"><a href="/path/to/my/article_02.html">Cool Article 2</a></div>
    <div class="listItem"><a href="/path/to/my/article_03.html">Cool Article 3</a></div>
    <div class="listItem"><a href="/path/to/my/article_04.html">Cool Article 4</a></div>
    <div class="listItem"><a href="/path/to/my/article_05.html">Cool Article 5</a></div>
    <div class="listItem"><a href="/path/to/my/article_06.html">Cool Article 6</a></div>
</div>
... HTML code blah blah blah ...


<!-- JS ON MAIN PAGE -->
<script type="text/javascript">
$(document).ready(function() {
    var imageContainer = "/path/to/image/page_2.html";
    var imageFileSrc;

    imageFileSrc = $.post(imageContainer); // Thought it best to store posted page data in a variable

    $('.imageCnt').find('a').each(function(index) {

        // First, get the article name
        var thisUrl = $(this).attr('href').split("/");
        var articleUrl = thisUrl[3].split(".");
        articleName = articleUrl[0];

        // Then, find the image based on the name
        var imageSrc = $("[name*="+articleName+"]"); // This is where I'm lost!? :)
    });

});
</script>

何か案は？:)

4

3 に答える 3

0

変更してみてください：

var imageSrc = $('img[name="'+articleName+'"]');
于 2012-09-27T02:55:30.913 に答える
0

試したことはありませんが、これはうまくいくようです...

http://forum.jquery.com/topic/link-to-another-page-and-execute-jquery-there (これは単なるリンクです)

編集:また、次のようなものを試すこともできます:

$.get('filename.html', function(data) {
$('.class_name',data).html(); //returns the HTML of .class_name inside of filename.html
});

http://api.jquery.com/jQuery.get/

于 2012-09-27T02:59:16.170 に答える
0

まず、ファイル名を取得するための URL パスの選択でエラーが発生しましたthisUrl[3]。thisUrl[4]

これを試して

$('.imageCnt').find('a').each(function(index) {

        // First, get the article name
        var thisUrl = $(this).attr('href').split("/");
        var articleUrl = thisUrl[4].split(".");
        articleName = articleUrl[0];

        // Then, find the image based on the name
        var imageSrc = $("img[name="+articleName+"]").attr('src'); // This is where I'm lost!? :)
    alert(imageSrc);
    });

ここに作業フィドルがあります

于 2012-09-27T03:10:07.550 に答える