0

JavaScriptを使用して、Webページの要素を作成および削除しています。Firefoxを除くすべてのブラウザで動作します。Firefoxでは、要素を作成し、要素を削除し、要素を再作成しますが、要素を再作成した後、要素が存在しないことを示す「見つかりません」タイプのエラーを返し、その時点で主に画面にスタックします点。

これにより、イメージが作成されます。

function createMOImage( objId )
{
    var img = document.createElement('img');
    var leftOffset = document.getElementById( objId ).offsetLeft;

    img.src = 'images/pre-butt-mo.png';
    img.style.position = 'absolute';
    img.style.left = leftOffset + "px";
    img.style.opacity = '0.2';
    img.style.zindex = '9';
    img.id = 'temp';
    img.onmouseout = function () { moff( objId ); };

    return img;
}

ご覧のとおり、作成された画像には、次の関数を呼び出すマウス出力イベントが与えられます。

function moff( objId )
{
    var container = document.getElementById( 'container' );
    var temp = document.getElementById( 'temp' );

    removeMOImage( );
    changeButt( objId );

    return;
}

変更関数は完全に正常に機能しますが、JavaScriptがremoveMOImage()関数で終了しているため、呼び出されません。

function removeMOImage(  )
{
    if ( img = document.getElementById('temp') )
    {
        img.parentNode.removeChild( temp );
    } else {
        return;
    }
}

removeChildcreate関数で要素が正常に再作成されたにもかかわらず、関数はnotfoundを返します。

IE Chrome OperaとFirefoxでテストしましたが、問題があるのはFirefoxだけです。私が克服しなければならなかった他のいくつかのFF固有の問題がありましたが、そのほとんどは他のスタックオーバーフロースレッドから解決されました。しかし、私はこの問題の解決策を見つけることができませんでした。

これは、ソースからの完全なJavaScript c＆pです。

function mon( objId )
{

    var container = document.getElementById( 'container' );
    var img = createMOImage( objId );

    container.appendChild( img );
    changeButt( objId );

    return;
}

function moff( objId )
{
    var container = document.getElementById( 'container' );
    var temp = document.getElementById( 'temp' );

    removeMOImage( );
    changeButt( objId );

    return;
}

function createMOImage( objId )
{
    var img = document.createElement('img');
    var leftOffset = document.getElementById( objId ).offsetLeft;

    img.src = 'images/pre-butt-mo.png'; // change image names to match button ID's
    img.style.position = 'absolute';
    img.style.left = leftOffset + "px";
    img.style.opacity = '0.2';
    img.style.zindex = '9';
    img.id = 'temp';
    img.onmouseout = function () { moff( objId ); };

    return img;
}

function removeMOImage(  )
{

    // find cross browser approach. General consensus is to use remove child from the parent div reference but there are alot of issues.
    // Also have issue with mouse moving over the element causing the element to be deleted even though the mouse never actually leaves the element.

    // Best Hypothesized solution - move the mouseout event to the MO image
    // Confirmed solution for Chrome and IE but FF will only delete the image after the first MOut, after recreating the element it stays perminantly
    if ( img = document.getElementById('temp') )
    {
        img.parentNode.removeChild( temp );
    } else {
        return;
    }

}

function changeButt( objId )
{
    var img = document.getElementById( objId );
    var imginv = document.getElementById( objId + "inv" );
    var temp = document.getElementById( 'temp' );

    if ( temp != null )
    {
        img.src = "images/blank-butt.png";
        imginv.src = "images/blank-butt-inv.png";
        return;
    } else {
        img.src = "images/" + objId + ".png";
        imginv.src = "images/" + objId + "inv.png";
        return;
    }    
}

目的は、別の画像の上に画像を作成し、新しく作成された画像（元の画像よりも大きい）からマウスを離したときに画像を削除することです。これが解決できれば非常にありがたいです。私は本当にフラッシュを使いたくありません。

もう1つの問題は、不透明度属性がIEで機能していないように見えることです。ここの誰かが何かアイデアを持っていない限り、私はそのソリューションをソロで作業します。そして、可能であれば、誰かがサファリでテストすることを気にしますか？Macにアクセスできません。

*愚かなメモをお詫びします。コンピューターから離れたときに追跡するのに役立つことを目的としていました。

[編集]不透明度の問題を修正しました。[編集]追加の変数を作成することで問題を解決しました。

4

1 に答える 1

1

これはスコーピングの問題です。ある関数で一時変数を定義し、それを別の関数で参照しようとします。

function moff( objId ) {
    var container = document.getElementById( 'container' );


    removeMOImage( );
    changeButt( objId );
}


function removeMOImage(  ) {
    var temp = document.getElementById( 'temp' );

    if ( temp ) {
        temp.parentNode.removeChild( temp );
    }
}

returnまた、最後のステートメントは必要ありません。早期に終了したり、値を返したりしない場合は、とにかくインタプリタが行うことを模倣していることになります。

于 2012-08-10T23:26:26.420 に答える