1

トグルする複数のdivがあるページで作業しています。この機能は動作します。検索機能が追加され、これも機能します。

現在存在するページの問題：検索バーが「デフォルト」のdivに配置され、結果がバーの下にある別のdivに読み込まれ、空の場合は表示されません。結果のdivは、この最初のデフォルトのdiv内にあります。別のdivに切り替えると、デフォルトのdivが失われ、元に戻すことができなくなります。

このため、検索バーを他のトグルリンクが配置されている左側のナビゲーションに移動しました。また、検索結果のdivをデフォルトのdivから「独立」するように移動しました。

私がやろうとしていること：検索ボタンに結果を含むdivを表示させ、結果を検索します。基本的に、検索機能を配列/トグル機能に統合します。検索機能は1つの.jsファイルにあり、トグル機能は別の.jsファイルにあります。

両方の.jsファイルから「onclick」を呼び出す方法が必要だと私は考え続けています。これにより、既存の2つの機能を組み合わせて別々に機能するために、余分な作業を行う必要がなくなります。私は例によって学習しているJavascriptの初心者であり、これを理解することができませんでした。私はこれの実用的な例を見たことがなく、私の検索はそれを生み出していません。

助けていただければ幸いです。私が問題を適切に説明したことを望みます。

編集：これは私がトグル機能のためにすでに持っているコードです。

var ids=new Array('a','b','c',[and so on--search results not added here yet]);

function switchid(id_array){
    hideallids();
    for( var i=0, limit=id_array.length; i < limit; ++i)
        showdiv(id_array[i]);
}

function hideallids(){
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }
}

function hidediv(id) {
    //safe function to hide an element with a specified id
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById(id).style.display = 'none';
    }
    else {
        if (document.layers) { // Netscape 4
            document.id.display = 'none';
        }
        else { // IE 4
            document.all.id.style.display = 'none';
        }
    }
}

function showdiv(id) {//safe function to show an element with a specified id
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById(id).style.display = 'block';
    }
    else {
        if (document.layers) { // Netscape 4
            document.id.display = 'block';
        }
        else { // IE 4
            document.all.id.style.display = 'block';
        }
    }
}

function initialize(){
    var t = gup("target");
    if( t )
    {
        switchid([t]);
    }
}

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null ){
      return "";
  } else {
      return results[1];
  }
}

前もって感謝します！

4

1 に答える 1

0

トグル関数コードがロードされると、関数はグローバルスコープで宣言されます。検索関数が読み込まれると、それらもグローバルスコープに含まれます。同じスコープ内にあるため、ファイルが異なっていても、トグル機能付きのファイルの後に検索機能付きのファイルを含めると、検索機能でトグル機能を使用できます。

TL; DR

function search(...) {
    // do your search stuff
    // when you get a result ID, toggle it from here
    hideallids();
    showdiv(id);
}

意味のある名前、コードを整理するための名前空間としてのオブジェクト、および識別子の単語境界をマークするためのキャメルケースまたはアンダースコアを使用することを強くお勧めします。例えば：

window.ZESearch = {
    'initialize' : function() { ... },
    'search': function() {
        // Find the node with the desired result
        ZESearch.showResult(id);
    },
    'hideAllResults': function() { ... },
    'hideResult' : function(id) { ... },
    'showResult' : function(id) { ... },
    ...
};
ZESearch.initialize();

学習しているだけなので、thisキーワードの複雑さを避け、コードを整理しておくためのオブジェクトを作成する簡単な方法を示しましたがwindow、コード内のどこからでも取得できるようにオブジェクトを追加しました。

于 2012-10-13T03:34:37.153 に答える