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

4

3 回答 3

2

jQuery 使用选择器并返回一个元素数组。您只需要传递一个选择器来选择所有元素并调用hide(). 假设您的所有元素都有“foo”CSS 类，例如<div class='foo'/>，您会编写$('.foo').hide(). 假设您有两个 ID 分别为“thing1”和“thing2”的元素。您的选择器会有所不同，但您仍会在返回的元素数组上调用 hide(): $('#thing1, #thing2').hide()。show()而hide()在后台修改显示属性，也可以直接修改，例如：$('#thing').css('display', 'block'). 检查 jQuery API 以获取更多详细信息。将 jQuery 添加到您的页面，并在 Firebug 控制台中进行操作，选择元素，隐藏和显示它们。

于 2010-08-19T05:00:45.040 回答
2

你可以走很多路。

首先，document.getElementbyId('something')在 jQuery 中，您可以使用$('#something'). 而不是使用style.display = blockand style.display = none，jQuery的方式是：

$('#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();

看起来您正试图将代码包装在具有（对您而言）有意义的名称的函数中。但这些函数名称似乎与您将要显示和隐藏的对象种类更密切相关，而不是与业务规则相关。所以也许HideImageButtonDivclose1forfollowup()你可能有：

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

因此，当您实际对这些功能和行为进行排序时，您的代码会更加清晰：

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

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

于 2010-08-19T05:16:20.730 回答
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 回答