Как сократить код на JS?

Question

[Робот]

Есть 2 инпута:

<input type="checkbox" name="d1" value="p1" id="dop_1" onclick="click_dop_1()">
<input type="checkbox" name="d1" value="p1" id="dop_2" onclick="click_dop_1()">

И 2 функции к ним:

function click_dop_1(){
        if (document.getElementById('dop_1').checked){
          div1.style.display = 'block';
        }else{
          div1.style.display = 'none';
        }
    }

    function click_dop_2(){
        if (document.getElementById('dop_2').checked){
          div2.style.display = 'block';
        }else{
          div2.style.display = 'none';
        }
    }

Как правильно оптимизировать этот код и совместить всё в одной функции, ведь они выполняют абсолютно одинаковую задачу, только для разных блоков.

Answer 1

[Олег]

<div id="somediv" style="display:none;">1111</div>
<div id="somediv2" style="display:none;">2222</div>

<input type="checkbox" data-show="somediv">
<input type="checkbox" data-show="somediv2">

(function(){

  var checkboxs = document.querySelectorAll('input[data-show]');
  
  for (var i=checkboxs.length; i--;) {
    checkboxs[i].addEventListener('change', function() {
      document.getElementById(this.dataset.show).style.display = (this.checked ? 'block' : 'none');
    });
  }

})();

jsfiddle

Answer 2

[Алексей Уколов]

Использовать this или event.target.

Answer 3

[lemme]

Самое простое:
document.getElementById('dop_2').checked
Заменить на
this.checked

Comments

[Робот]

А у чекбокса onclick="click_dop_1()" надо наверное на что-то заменить тогда тоже?

[lemme]

Робот: нет

[Робот]

lemme: так у меня тогда будет по-прежнему куча функций, просто одна строчка в них изменится...

[lemme]

Робот: в click_dop_1() нужно передать текущий элемент. Т.е this

function click_dop_1(element){
if (element.checked){
div1.style.display = 'block';
}else{
div1.style.display = 'none';
}
}

Answer 4

[Дмитрий Калюк]

<input type="checkbox" name="d1" value="p1"  onclick="click_dop()">
<div id="wrap-d1">text d1</div>
<input type="checkbox" name="d2" value="p1"  onclick="click_dop()">
<div id="wrap-d2"> text d2</div>

function click_dop(){
   document.getElementById('wrap-' + this.name).style.display = this.checked ? 'block' : 'none' ;
}

Как то так

Answer 5

[lega]

То же самое что и у Олег только проще (без js) - https://jsfiddle.net/lega911/92r8zs10/

подробности тут: https://habrahabr.ru/post/272125/

Comments

[lemme]

зачем людей обманывать то? Без JS это можно сделать, но в вашем случае - сделано с js.

[lemme]

вот без js https://jsfiddle.net/2q37myy1/

[lega]

Читер :)