最小化'；n'；jquery中一个函数中的javascript函数数

我在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将这些函数合并成一个函数。有什么建议吗？

jQuery使用选择器并返回元素数组。您只需传递一个选择所有元素的选择器，然后调用

hide（）

。假设您的所有元素都有“foo”CSS类，例如

，您可以编写

$（'.foo'）.hide（）

。假设您有两个ID为“thing1”和“thing2”的元素。您的选择器可能有点不同，但您仍然需要对返回的元素数组调用hide（）：

$（“#thing1，#thing2”）.hide（）

show（）

和

hide（）

在后台修改display属性，也可以直接修改，例如：

$（“#东西”）.css（'display'，'block'）

。有关更多详细信息，请查看jQueryAPI。将jQuery添加到您的页面，在Firebug控制台中玩游戏，选择元素，隐藏并显示它们。

jQuery使用选择器并返回元素数组。您只需传递一个选择所有元素的选择器，然后调用

hide（）

。假设您的所有元素都有“foo”CSS类，例如

，您可以编写

$（'.foo'）.hide（）

。假设您有两个ID为“thing1”和“thing2”的元素。您的选择器可能有点不同，但您仍然需要对返回的元素数组调用hide（）：

$（“#thing1，#thing2”）.hide（）

show（）

和

hide（）

在后台修改display属性，也可以直接修改，例如：

$（“#东西”）.css（'display'，'block'）

。有关更多详细信息，请查看jQueryAPI。将jQuery添加到您的页面，在Firebug控制台中玩游戏，选择元素，隐藏并显示它们。

这样如何：

   /**
    * 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

这个怎么样：

   /**
    * 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

---

你可以走很多路

首先，在jQuery中可以使用

$（'#something'）

，而不是

document.getElementbyId（'something'）

。jQuery方法不是使用

style.display=block

和

style.display=none

，而是：

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

甚至：

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

接下来，希望您的页面是结构化的，这样您就可以按类或封闭容器进行选择，而不是通过它们各自的ID来识别长长的项目列表。如果有十个元素要隐藏，并且它们都在

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();

看起来您正试图将代码封装在具有（对您）有意义的名称的函数中。但是这些函数名似乎与您将要显示和隐藏的对象类型的关系更为密切，而不是与业务规则的关系。因此，您可能需要执行以下操作，而不是

隐藏页面按钮ndivclose1forfollowup（）

：

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

因此，当您实际排序这些函数和行为时，您的代码将更加清晰：

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

---

只是一些让你开始的想法。

你可以走很多路

首先，在jQuery中可以使用

$（'#something'）

，而不是

document.getElementbyId（'something'）

。jQuery方法不是使用

style.display=block

和

style.display=none

，而是：

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

甚至：

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

接下来，希望您的页面是结构化的，这样您就可以按类或封闭容器进行选择，而不是通过它们各自的ID来识别长长的项目列表。如果有十个元素要隐藏，并且它们都在

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();

看起来您正试图将代码封装在具有（对您）有意义的名称的函数中。但是这些函数名似乎与您将要显示和隐藏的对象类型的关系更为密切，而不是与业务规则的关系。因此，您可能需要执行以下操作，而不是

隐藏页面按钮ndivclose1forfollowup（）

：

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

因此，当您实际排序这些函数和行为时，您的代码将更加清晰：

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

---

只是一些让您开始的想法。

正如Naikus所说，我可能对数组中每个项的

hide（）

操作不正确，我想到了一些在数组中工作的Rails方法。您需要使用

$。each（）

然后对每个项调用您想要的jQuery函数。正如Naikus所说，我可能不正确地认为

hide（）

操作数组中的每个项，我想到了一些在数组上工作的Rails方法。您需要使用

$。each（）

然后为每个项目调用所需的jQuery函数。