1

とても初歩的な質問で申し訳ありません。私はjavascriptが初めてで、それを学んでいます。私は1つの簡単な問題で立ち往生しています-

これは私がやろうとしていることです-

私はいくつかのヘッダーを持っていますinnertext

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

このように、マウスオーバーでこのヘッダーのinnerHTMLを変更しています-

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

マウスアウトでも同じことを行いますが、このヘッダータグの元の innerHTML を取得するためです。

function fun2()
{

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

}

しかし、onmouseout 関数は、innerHTML が変更されたことを示していますa。この場合です。

onmouseoutで元の innerHTMLsampleを再度取得するにはどうすればよいですか?

これを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
    }
}

このようにして、追加のグローバル変数を必要とせず、関数の近くにとどまるキャッシュ システムを構築します。

次のステップは、関数を 1 つだけ使用し、新しい値をパラメーターとして送信することです。トグル関数のようなものを作成します:

<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についてさらに説明が必要な場合はObject、この回答にコメントを残してください。詳細をお知らせします...頑張ってください!!

于 2013-09-29T12:06:58.173 に答える
0

非常に簡単な実装は、div に表示したい 2 つのテキストを持つことです。だからあなたは持っています：

<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 に答える
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 に答える