使用事件处理程序隐藏和隐藏图像答案

【问题标题】：Image Hide in and hide out using event handler使用事件处理程序隐藏和隐藏图像
【发布时间】：2019-09-23 21:42:58
【问题描述】：

我正在处理一个网页，其中包含要显示的项目和子项目列表。在 Div 元素中，我正在设置值 image。使用图像显示和隐藏选项 On click 事件处理程序被触发。这似乎适用于 IE9，但不适用于其他浏览器（FireFox、Chrome 和 safari）。

<div id="Type_A Medicine" value="H" entity="Type A Medicine" onClick="showHide(this,'MIE_Type_A Medicine')"><img src='<%=request.getContextPath()%>/images/plus.gif'>Type A Medicine</div>

function showHide(ctrl,id)
{
    if (ctrl.value == "H")
    {
            ctrl.value = "S";
            ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/minus.gif'>" +ctrl.getAttribute("entity");
            showBlock(id);
    }
    else if (ctrl.value == "S")
    {
        ctrl.value = "H";
        ctrl.innerHTML = "<img src='<%=request.getContextPath()%>/images/plus.gif'>" + ctrl.getAttribute("entity");
        hideBlock(id);
    }
}


function hideBlock(blockId)
{
    var str = "document.all." + blockId + ".style.display='none'";
    eval(str);
}

function showBlock(blockId)
{
    var str = "document.all." + blockId + ".style.display=''";
    eval(str);
}

我仍然无法弄清楚浏览器列表的区别。请帮忙...

【问题讨论】：

你，所以你的 id 值不能有空格。

标签： javascript event-handling cross-browser dom-events

【解决方案1】：

我猜这是因为您使用了无效的 ID 语法。 ID 不能有空格。如果您使用无效的 HTML，您不能期望 javascript 在浏览器中以相同的方式工作。

id="Type_A Medicine"

此外，您永远不会在传递 ID 的地方发布 showBlock 或 hideBlock 的代码。如果没有代码，您无法判断那里出了什么问题。

【讨论】：

我确定这是问题
感谢您的回复。抱歉，这是一个拼写错误。但是即使更改后它对点击事件也没有任何影响..

【解决方案2】：

要检索非标准属性，您应该使用.getAttribute() 而不是尝试将它们作为属性进行访问。

所以ctrl.entity 应该是ctrl.getAttribute("entity") 和其他非标准属性相同。在 Chrome 中运行此示例：http://jsfiddle.net/jfriend00/Lxna7/。

此外，您应该从 ID 值中删除空格，因为这不是合法字符，并且会使 id 在许多情况下无法使用（其中空格是标识符之间的分隔符）。

【讨论】：

【解决方案3】：

尝试正确关闭图像标签，看看是否能解决问题：

<img src="path/file.html" />

【讨论】：

感谢大家的回复和支持。我做了修改，发现只有隐藏功能在所有浏览器中都可以正常工作，效果不好。但仍然面临隐藏功能的问题。