0

JavaScript には、ほとんど要素を取得してその表示プロパティを設定する「n」個の JavaScript 関数があります。

function ShowDivforassignclick() {
    document.getElementById("FollowupDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
}
function HideDivforassignclick() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close1").style.display = 'block';
    return false;

}
function HideDivforassignclick1() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close1").style.display = 'block';
    return false;

}
function HideDiv() {
    document.getElementById("adddiv").style.display = 'none';
}
function HideImageButtonDivcontactinfollowup() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable4").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'block';
    return false;
}
function HideImageButtonDivcontact() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable1").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'block';
    document.getElementById("close").style.display = 'block';
    return false;
}

function HideImageButtonDivclose() {
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable1").style.display = 'none';
    document.getElementById("ImageButtonDiv1").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'none';
    document.getElementById("close").style.display = 'none';
    return false;
}
function HideImageButtonDivclose1() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable2").style.display = 'none';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'none';
    document.getElementById("close1").style.display = 'none';
}
function HideImageButtonDivclose1forfollowup() {
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable2").style.display = 'none';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'none';
    document.getElementById("close1").style.display = 'none';
}
function HideImageButtonDivuser() {

    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close").style.display = 'block';
    document.getElementById("close1").style.display = 'none';

    return false;
}
function HideImageButtonDivuser1() {

    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close").style.display = 'none';
    document.getElementById("close1").style.display = 'block';
    return false;
}
function HideImageButtonDivuserinfollowup() {
    document.getElementById("FollowupDiv").style.display = 'none';
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    return false;
}
function HideImageButtonDivforAdd() {
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable").style.display = 'none';
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("ctl00_ContentPlaceHolder1_ImgNoRecords").style.display = 'none';
    return false;
}

function HideImageButtonDivforEdit() {
    document.getElementById('ImageButtonDiv').style.display = 'none';
    document.getElementById("datatable").style.display = 'none';
    document.getElementById("adddiv").style.display = 'block';
    return true;
}
function ShowImageButtonDiv() {

    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    return true;
}
function ShowImageButtonDivs() {

    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("close").style.display = 'none';
    document.getElementById("close1").style.display = 'block';
    return true;
}
function ShowImageButtonDivss() {

    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("close1").style.display = 'block';
    return true;
}
function ShowImageButtonDivforfollowup() {
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'block';
    return true;
}
function ShowImageButtonDiv1() {

    document.getElementById("ImageButtonDiv1").style.display = 'block';
    document.getElementById("datatable1").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';

    return true;
}
function showDisplaydiv() {
    document.getElementById("ConfirmationPanel").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    return false;
}

jqueryを使ってこれらの関数を1つにする本当に簡単な方法があるに違いないと思います。なにか提案を？

4

3 に答える 3

2

あなたが行くことができる多くの方法があります。

まず、 の代わりにdocument.getElementbyId('something')、jQuery で を使用できます$('#something')。style.display = blockとを使用する代わりにstyle.display = none、jQuery の方法は次のとおりです。

$('#something').hide();
$('#something').show();

あるいは：

$('#something').toggle();

次に、アイテムの長いリストを個々の ID で識別するのではなく、ページが構造化されているため、クラスまたはそれを囲むコンテナーによって選択できるようになります。非表示にする要素が 10 個あり、それらがすべてdivコンテナー内にある場合は、非表示にするために ID で各要素を選択しないでください。コンテナーを選択します。

$('#container').find('.setOne').hide(); // assume class "setOne" on all
                                        // elements in a particular group

$('#container_of_datatable2').hide(); // if hiding the container works for you

$('#container_of_datatable2') 
  .find('table, div') // to hide tables or divs within the specific container
  .hide();

コンテナー アプローチがうまくいかない場合 (ID が固定パターンにほぼ一致しているように見えますが、完全には一致していないように見えます)、一緒に機能する ID のセレクターを含む配列を設定できます。

var setOne = ['#datatable4','#adddiv','#imagebuttondiv','#etc'];
var setTwo = ['#something','#something-else','#etc2'];

そして、これらを次のように使用します。

$( setOne.join(",") ).hide();

(あなたにとって) 意味のある名前を持つ関数でコードをラップしようとしているようです。しかし、これらの関数名は、ビジネス ルールよりも、表示および非表示にするオブジェクトの種類により密接に関連しているようです。したがって、おそらく の代わりにHideImageButtonDivclose1forfollowup()、次のようになる可能性があります。

function beginFollowup(){
  $( setOne.join(",") ).hide();
  $( setFive.join(",") ).show();
  ...etc...
}

したがって、これらの関数と動作を実際に並べると、コードがより明確になります。

beginFollowup();
endFollowup();
if( something ) {
  beginSomeOtherThing();
}

開始するためのいくつかのアイデア。

于 2010-08-19T05:16:20.730 に答える
2

jQuery はセレクターで動作し、要素の配列を返します。すべての要素を選択するセレクターを渡して を呼び出すだけhide()です。すべての要素に「foo」CSS クラスがあるとし<div class='foo'/>ましょう$('.foo').hide()。ID が「thing1」と「thing2」の 2 つの要素があるとします。セレクターは少し異なりますが、返された要素の配列に対して hide() を呼び出します$('#thing1, #thing2').hide()。show()バックグラウンドで表示プロパティをhide()変更します。たとえば、次のように直接変更することもできます$('#thing').css('display', 'block')。詳細については、jQuery API を確認してください。jQuery をページに追加し、Firebug コンソールで遊んで、要素を選択し、それらを非表示および表示します。

于 2010-08-19T05:00:45.040 に答える
1

これはどう：

   /**
    * Shows or hides elements specified by array of element IDs, 
    * @param bShow true if you want to show the elements, hide otherwise
    */
   function showHide(arrElemIds, bShow)   {
      $.each(arrElemIds, function(idx, elemId)   {
         if(!!bShow)  {
            $("#" + elemId).show();
         }else  {
            $("#" + elemId).hide();
         }
      }
   }

次に、次のように使用します。

showHide(["adddiv", "ImageButtonDiv"]); //hide
showHide(["datatable2", "ImageButtonDiv2", "close1"], true); // show
// ...and so on

編集：

考え直して、表示と非表示を別々の機能にした方がいいと思います。

   /**
    * Shows specified by array of element IDs, 
    */
   function show(arrElemIds)   {
      $.each(arrElemIds, function(idx, elemId)   {
         $("#" + elemId).show();
      }
   }

   /**
    * Hides elements specified by array of element IDs, 
    */
   function hide(arrElemIds)   {
      $.each(arrElemIds, function(idx, elemId)   {
            $("#" + elemId).hide();
      }
   }

    hide(["adddiv", "ImageButtonDiv"]); //hide
    show(["datatable2", "ImageButtonDiv2", "close1"]); // show
于 2010-08-19T05:02:08.020 に答える