1

对于这个非常基本的问题，我很抱歉。我对 javascript 和学习它非常陌生。我被一个简单的问题困住了——

这就是我想要做的-

我有一个标题有一些innertext

<h1 id="bd" onmouseover="fun1()" onmouseout="fun2()"> sample</h1>

我正在像这样在鼠标悬停时更改此标头的 innerHTML -

function fun1()
{
document.getElementById("bd").innerHTML="a";
}

在 mouseout 上我也这样做，但要为这个标题标签获取原始的 innerHTML。

function fun2()
{

document.getElementById("bd").innerHTML=document.getElementById("bd").innerHTML;

}

但是 onmouseout 函数显示我更改了 innerHTML，即a在这种情况下。

如何在mouseout 上sample再次获得原始的innerHTML？

我希望这可以在 javascript 中完成。

我尝试了另一种方式

function fun1()
{
document.getElementById("bd").innerHTML="a";
}
function fun3()
{
var ds=document.getElementById("bd").innerHTML;
alert(ds);

}
function fun2()
{

document.getElementById("bd").innerHTML=fun3();

}

但它也不起作用。

4

5 回答 5

2

一个非常通用的版本如下：

首先稍微改变一下你的标记：

<h1 id="bd" onmouseover="fun1(this)" onmouseout="fun2(this)"> sample</h1>

这样您就不需要在回调函数中再次查找您的元素。这适用于您将鼠标悬停的多个元素。然后你去：

function fun1(elm) {
    if (!fun1.cache) fun1.cache = {}; // extend your function with a cache
    fun1.cache[elm.id] = elm.innerHTML; // write into cache -> fun1.cache.bd
    elm.innerHTML = 'a';
}

function fun2(elm) {
    if (fun1.cache && fun1.cache[elm.id]) { // see if cache exists and...
        elm.innerHTML = fun1.cache[elm.id]; // read from it
    }
}

通过这种方式，您可以构建一个不需要额外全局变量但更接近您的函数的缓存系统。

下一步将只使用一个函数并将新值作为参数发送。创建类似切换功能的东西：

<h1 id="bd" onmouseover="fun(this, 'a')" onmouseout="fun(this)"> sample</h1>

然后你的功能：

function fun(elm, newValue) {
    if (!fun.cache) fun.cache = {};
    var value = newValue || fun.cache[elm.id]; // no newValue means recover old value
    fun.cache[elm.id] = elm.innerHTML; // alway save the old value
    elm.innerHTML = value;
}

如果您需要更多关于this和创建Objects 的解释，只需对此答案发表评论，我会回来提供更多详细信息......祝你好运！

于 2013-09-29T12:06:58.173 回答
0

将第一个 innerHtml 存储在一个全局变量中，并使用该变量备份第一个 innerHtml。

var oldInner = '';
function fun1()
{
oldInner  = document.getElementById("bd").innerHTML;
document.getElementById("bd").innerHTML="a";
}

function fun2()
{

document.getElementById("bd").innerHTML=oldInner;

}
于 2013-09-29T11:51:29.923 回答
0

您需要以某种方式存储原始值：

var originalInnerHTML = "";

function fun1()
{ 
    originalInnerHTML = document.getElementById("bd").innerHTML;
    document.getElementById("bd").innerHTML="a";
}

function fun2()
{
    document.getElementById("bd").innerHTML=originalInnerHTML
}

目前，您只需获取现有的 innerHTML 并将其设置为新的 innerHTML - 它总是相同的。所以这条线永远不会改变任何东西：

document.getElementById("bd").innerHTML=document.getElementById("bd").innerHTML;
于 2013-09-29T11:51:53.740 回答
0

一旦你改变了一个元素的innerhtml，旧数据就消失了

为了获取旧数据，您首先需要将其存储在其他地方。

例如：在鼠标悬停时，您可以先将原始 html 复制到隐藏的 div，然后在鼠标移出时，您可以再次从隐藏的 div 复制到主 div。

希望这可以帮助。

于 2013-09-29T11:53:43.733 回答
0

一个非常简单的实现是在 div 中显示您想要显示的两个文本。所以你有了：

<h1 id="bd">
    <span id='sample1'>sample1</span>
    <span id='sample2' style='display: none'>a</span>
</h1>


var el = document.getElementById("bd");
el.onmouseover = function() {
    document.getElementById("sample1").setAttribute("style", "display: none");
    document.getElementById("sample2").setAttribute("style", "");
}

el.onmouseout = function() {
   document.getElementById("sample2").setAttribute("style", "display: none");
   document.getElementById("sample1").setAttribute("style", "");
}
于 2013-09-29T13:01:19.310 回答