1

由于内部站点设置的情况，我试图解析来自本地页面的一系列图像，并通过将名称属性与文章名称匹配来将图像信息传递到另一个本地页面。我正在寻找图像的 src 和 class 属性。

这两个页面位于同一个域中，但一个页面包含一系列图像，另一个页面包含我们的标准页面布局，该布局将使用 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

首先，您在选择获取文件名的 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 回答
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 回答