Question

我遇到了javascript函数的问题。我想通过更改课程来替换图标。

在我的页面上，我有以下元素：

<i class="wait icon" alt="{webui_botstatenotavailable}" title="{webui_botstatenotavailable}" id="{botname}"></i>

以下javascript应该更改类，但它不起作用：

function incomingBotStatusList(http_request, statusOff, statusOn)
{
if (http_request.readyState == 4)
{
    if (http_request.status == 200)
    {
        if (http_request.responseText.length < 7)
        {
            // Error
        }
        else
        {
            var botStatusList = JSON.parse(http_request.responseText);
            for (var key in botStatusList)
            {
                if (botStatusList.hasOwnProperty(key))
                {
                    var botStatusImage = document.getElementById(key);
                    if (botStatusImage != null)
                    {
                        if (botStatusList[key] == 0)
                        {
                            botStatusImage.class.innerHTML = "images/bullet_red.png";
                            botStatusImage.title = statusOff;
                            botStatusImage.alt = statusOff;
                        }
                        else if (botStatusList[key] == 1)
                        {
                            botStatusImage.class.innerHTML = "<i class=\"checkmark green icon\">";
                            botStatusImage.alt = statusOn;
                            botStatusImage.title = statusOn;
                        }
                    }
                }
            }
        }
    }
}
}

你们有人知道它会如何运作吗？

感谢您的帮助！

最诚挚的问候皮尔

Answer 1

我发现您的代码存在一些问题。首先，<i>元素用于将斜体格式应用于文本。它不是图标或图像的HTML代码。

其次，您编写botStatusImage.class.innerHTML，但Element.class不存在，Element.className是一个字符串。它没有innerHTML属性。所以，你可以写botStatusImage.className = "new_class_name";，这样会更正确。

然后，您应该通过调用botStatusImage.setAttribute('src', new_url)更改图像来源，您已将new_url设置为新图像位置。

查看从Element返回的document.getElementById课程的javascript参考：check this link

我的建议，从简单开始，然后使其变得复杂。

首先，尝试在没有AJAX请求的情况下更改图标。尝试编写这样的函数：

function changeIcon( imageId, newUrl ){
    var element = document.getElementById( imageId );
   element.setAttribute( "src", newUrl );
}

然后通过手动调用URL来在控制台中测试此函数。

一旦有效，请不要改变它！接下来添加AJAX调用，当您从服务器响应中获得Icon url时，您所做的就是调用已编写并测试过的函数。这样您就可以将AJAX代码与图像更新代码分开，并且可以单独测试它们。

关键是较小的功能。首先构建简单的东西，然后从更难的函数中调用那些简单的函数。一旦你知道easy函数运行良好，就可以更容易地在较难的函数中找到问题。

在我的网页上正确功能的想法？

1 个答案: