如何根据另一个页面中的内容更改图像链接答案

【问题标题】：How to change an image link based on content in another page如何根据另一个页面中的内容更改图像链接
【发布时间】：2011-04-18 22:44:40
【问题描述】：

我想在我的页面 (page1) 上放置一个图像，它是指向另一个页面 (page2) 的链接，但我希望根据 page2 的内容显示的图像是两个可能的图像之一。

在这种情况下，Page2 是一个报告当前状态的 wiki 页面。如果没有问题需要报告，page1 上的图像将是绿色的。如果列出了问题，图像将是红色的。

我的计划是使用 html 注释标签在我的 wiki 页面上嵌入  或 。然后我想我可以使用 javascript、Jquery 或类似的东西来检查我的评论是否存在并相应地更改 page1 上的图像。我只是不确定该怎么做。

我也对其他想法持开放态度。无论我想出什么解决方案，wiki 用户都必须简单地进行更改，而无需用户更改 page1（这不是 wiki 的一部分）。

更新：

我最终做了什么：

$(document).ready(function() {
    statusCheck();
    setInterval(statusCheck,300000);
}

function statusCheck() {
    $.ajax({
        type: "GET",
        url: "path/to/wiki/MainPage.ashx",
        dataType: "html",
        cache: false,
        success: function(html) {
            $('#statusImage').attr('src', function() {
                if ($(html).find("#statusGreen").length)
                {
                    return '/images/green.gif';
                }
                else
                {
                    return '/images/red.gif';
                }
            });         
        },
        error: function(request,status, error) {
            $('#statusImage').attr('src', '/images/red.gif');
        }       
    });
}

然后在 wiki 页面上，我只需将相关 div 上的 id 属性更改为“statusGreen”或“statusRed”，如下所示：

<div id="statusGreen">
<font size="5" color="green">No issues to report.</font>
</div>

我要更改的图像会获得一个“statusImage”ID：

<img id="statusImage" width="95" height="95" border="0" />

【问题讨论】：

page2 如何确定此状态？是在服务器上完成的吗？您可以只指向 page1 上的单个图像，然后让 page2 脚本将其更改为红色或绿色（例如，将服务器上的文件替换为适当的颜色）
第 2 页上报告的状态由 wiki 用户手动更新。他们必须手动更改评论标签，然后脚本必须检查这个标签。

标签： javascript jquery

【解决方案1】：

这是非常浪费的，因为你让所有 wiki 页面的内容只检查一个单词的存在，无论如何，这里是如何做到的：

<div id="hidden_container" style="display: none;"></div>
<img src="" id="wikistatus"/>

function set_status() {
  var status_image = 'images/green.gif';
  $('#hidden_container').empty();
  $('#hidden_container').load('path/to/wiki.html #status', function() {
    var status = $('#hidden_container').text();
    var is_green = status.indexOf('<!--STATUSGREEN-->');
    if(is_green === false) status_image = 'images/red.gif';
    $('#wikistatus').attr('src', status_image);
    setTimeout('set_status();', 5000); // execute again in 5 seconds
  });
}

$(document).ready(function() {
  set_status();
});

在 wiki.html 中，确保将状态代码包装在一个容器中，并将 status 作为 id：

<div id="status"><!--STATUSGREEN--></div>

【讨论】：

与上面我最终做的非常相似。我同意你的 cmets 认为这是浪费的，但没有更好的方法来做到这一点。

【解决方案2】：

为了更简单，您可以添加一个参数（如果可能，取决于您对 wiki 的控制程度）

<a href="page2"><img src="page2?image" alt="" /></a>

如果请求包含参数“image”，则让 wiki 页面直接返回正确的图像

【讨论】：

我对 page2（wiki）的控制不如我对 page1 的控制。我希望切换逻辑发生在那里。