3

この質問の説明が少し不十分でしたら申し訳ありません。JQuery は私の「ネイティブ」言語ではないため、できる限り説明するように努めます。（そして、コードを表示するのに役立つjsfiddleをセットアップしました）http://jsfiddle.net/6eYYR/

私はここにウェブページを持っています: http://www.waranuwater.com.au/pages/test-1私は同僚に助けてもらい、現在の Jquery にたどり着きました。

2 番目の領域まで下にスクロールします。2 つの div が並んで設定されています。左側にはイメージマップが含まれ、右側には HTML コンテンツを含む「コンテンツ領域」があります。「コンテンツ領域」には、ユーザーがイメージマップの一部にカーソルを合わせると変化するテキストが含まれています。

イメージマップの関連部分がホバーされたとき、ユーザーがイメージマップの上にホバーしたときに、コンテンツ（当面は見やすくするために黒くしました）を変更することができましたが、作業できませんホバーが発生したときに初期コンテンツを非表示にする方法 (「完全な汚染物質の除去」で始まるビット)

これは私の現在のJqueryコードです:

 function showHideDivs(indx){
            hideDivs();
            oShowHideDivs[indx].style.display = 'block';
        }
        function hideDivs(){
            for(i=0; i < oShowHideDivs.length; i++){
                oShowHideDivs[i].style.display = 'none';
            }
        }
        window.onload=function(){
            oShowHideDivs =  
document.getElementById('ccontainer').getElementsByTagName('div');
            var oMap = document.getElementById('myMap');
            for(i=0; i < oMap.areas.length; i++){
                oMap.areas[i].indx = i;
                oMap.areas[i].onmouseover=function(){showHideDivs(this.indx);}
                oMap.areas[i].onmouseout = hideDivs;
            }
        }

ここで何か不足していますか？Jqueryに既存のテキストを「隠す」ように指示する必要がありますか?もしそうなら、どうすればそれを行うことができますか?

前もって感謝します

4

2 に答える 2

1

あなたのコードに jquery 参照が表示されますが、jquery を使用しないのはなぜですか? 以下は解決策です

次のようなものを非表示にする必要がある要素にクラス名を提供します

<h3 class="tohide">Complete Contaminant Removal</h3>
<p class="tohide">.......
.....

更新された方法:

function showHideDivs(indx){
            hideDivs();
            oShowHideDivs[indx].style.display = 'block';
            $(".tohide").hide();
        }

すべての div を非表示にすると、元の要素を表示する必要がある場合があります。

function hideDivs(){
            for(i=0; i < oShowHideDivs.length; i++){
                oShowHideDivs[i].style.display = 'none';
            }
            $(".tohide").show();
        }

そのようなすべてのタスクに jquery を使用すると、開発時間、労力、およびコードが削減されます。

それでもネイティブの JavaScript を使用したい場合は、非表示にする必要があるすべての要素をラップし、<span id="tohide">ホバー選択に基づいてこの要素を非表示にする必要があります。

于 2012-12-19T04:51:27.757 に答える
0

「初期コンテンツ」は 内にないdivため、表示/非表示 div ロジックの影響を受けません。他のものと同じように、最初に独自の div に配置することをお勧めします。

<div id="ccontainer">
    <div id="Sediment-Filter">...</div>
    <div id="Anti-Bacterial-Filter">...</div>
    <div id="Proteus-RO-Membrane">...</div>
    <div id="Activated-Coconut-Carbon">...</div>
    <div id="Initial-Contents">
        <h3>Complete Contaminant Removal</h3>
        <p>What truly sets this system apart ...
        ...
    </div>
</div>

hideDivsが呼び出されると、他のものと同じように非表示になります。次のステップは、他の div が非表示のときにデフォルトで表示することです。

    function hideDivs(showInitial){
        for(i=0; i < oShowHideDivs.length; i++){
            oShowHideDivs[i].style.display = 'none';
        }
        if ( showInitial )
            document.getElementById('Initial-Contents').style.display = 'block';
    }

...特定の div を表示している場合を除きます。

function showHideDivs(indx){
    hideDivs(false); // Don't show initial contents
    oShowHideDivs[indx].style.display = 'block';
}

showInitialオブジェクトの場合は「真実」Eventであるため、行で直接使用できることに注意してくださいoMap.areas[i].onmouseout = hideDivs;。

（ところで、あなたの質問はjQueryを使用していません。バニラJavaScriptだけです-ページの他の場所にjQueryがあります）

于 2012-12-19T04:51:35.453 に答える