Question

所以我的问题是：有没有办法替换重复的document.getElementById？正如我有很多人并且可能会同意的那样，代码看起来并不像这样。

下面是我代码中的示例。

document.getElementById('FieldAddClient').hidden = true;
document.getElementById('FieldAddClient').disabled = true;
document.getElementById('AddingClientTitle').hidden = true;
document.getElementById('AddingClientDesc').hidden = true; 
document.getElementById('DuplicatingClientTitle').hidden = false; 
document.getElementById('DuplicatingClientDesc').hidden = false;

Answer 1

制作'em变量：

\node_modules\@types

设置帮助功能：

var my_el = document.getElementById('selector');

my_el.style.hidden = true;

提供更深的帮助功能：

function el_by_id(s)
{
    return document.getElementById(s);
}

el_by_id('selector').style.hidden = true;

或者使用jQuery ...

Answer 2

我不知道您有多少这样的陈述以及您究竟想做什么，也许您可以尝试一下。

function modifyDOM (id, type, hidden, disabled){ 
   if('hidden' == type)
      document.getElementById(id).hidden = hidden;
   if('disabled' == type)
      document.getElementById(id).disabled = disabled;
}

并像modifyDOM('FieldAddClient', 'hidden', true, true)

一样访问它

您还可以拥有所有id的列表，并在该列表上循环调用此方法。

Answer 3

您还可以使用带有ID的对象数组，并禁用或隐藏为属性，例如{ id: 'test1', hide: true}。参见下面的示例

function hideOrDisable(items = []) {
  
  items.forEach(item => {
    
    if (item && item.hide) {
      
      document.getElementById(item.id).hidden = item.hide;
    } else {
      
      document.getElementById(item.id).disabled = item.disable;
    }
  });
}

function test() {

  hideOrDisable([
    {id: 'test1', hide: true}, 
    {id: 'but1', disable: true}
  ]);
  
}

<body>
  <div id='test1'>test 1</div>
  <div id='test2'>test 2</div>
  <div id='test3'>test 3</div>
  <div id='test4'>test 4</div>
  <button id='but1'>Hello</button>
  <button id='test' onclick="test()">Hide</button>
</body>

Answer 4

像这样创建函数：

function _id(id){
    return document.getElementById(id);
}

并像这样使用它：

_id('FieldAddClient').hidden = true;
_id('FieldAddClient').disabled = true;
_id('AddingClientTitle').hidden = true;
_id('AddingClientDesc').hidden = true; 
_id('DuplicatingClientTitle').hidden = false; 
_id('DuplicatingClientDesc').hidden = false;

Answer 5

您可以将检索到的元素保存到变量中。您还可以制作包装辅助函数，以使代码更简短。

此外，如果您要在每一个之间切换，则可以编写如下函数：

var fieldSets = ['FieldAdd', 'AddingClient', 'DuplicatingClient'];
function activateSet(var field) {
    foreach(var item in fieldSets) {
        document.getElementById(item + 'Title').hidden = true;
        document.getElementById(item + 'Desc').disabled = true;
    }

    document.getElementById(field + 'Title').hidden = false; 
    document.getElementById(field + 'Desc').disabled = false;
}

那么您就可以致电

activateSet('AddingClient');

替换重复的document.getElementById

5 个答案: