У меня есть «n» количество функций javascript в javascript, который почти получает элемент и устанавливает его свойство display.

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. Любое предложение?

0
ACP 19 Авг 2010 в 08:42

3 ответа

Лучший ответ

Есть много способов, которыми вы можете пойти.

Во-первых, вместо document.getElementbyId('something') в jQuery вы можете использовать $('#something'). Вместо использования style.display = block и style.display = none, способ jQuery:

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

Или даже:

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

Далее, вместо того, чтобы идентифицировать длинные списки элементов по их индивидуальным идентификаторам, мы надеемся, что ваша страница структурирована, поэтому вы можете выбирать по классам или вмещающему контейнеру. Если вам нужно спрятать десять элементов, и все они находятся внутри контейнера div, не выбирайте каждый из них по идентификатору для скрытия. Выберите контейнер:

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

Если контейнерный подход не работает для вас (кажется, что ваши идентификаторы почти , но не совсем соответствуют фиксированному шаблону), вы можете настроить массивы, содержащие селекторы для идентификаторов, которые работают вместе.

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

Просто несколько идей, чтобы вы начали.

2
Ken Redler 19 Авг 2010 в 05:23

Как насчет этого:

   /**
    * 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
1
naikus 19 Авг 2010 в 05:02

JQuery работает с селектором и возвращает массив элементов. Вам просто нужно передать селектор, который выбирает все ваши элементы, и вызвать hide(). Допустим, все ваши элементы имеют класс CSS "foo", например <div class='foo'/>, вы написали бы $('.foo').hide(). Допустим, у вас было два элемента с идентификаторами "thing1" и "thing2". Ваш селектор будет немного другим, но вы все равно вызовете hide () для возвращенного массива элементов: $('#thing1, #thing2').hide(). show() и hide() изменяют свойство отображения за кулисами, вы также можете изменить его напрямую, например: $('#thing').css('display', 'block'). Проверьте jQuery API для более подробной информации. Добавьте jQuery на свою страницу и поиграйтесь в консоли Firebug, выбирая элементы, скрывая и показывая их.

2
Andy Atkinson 19 Авг 2010 в 05:00