2

Должно быть: нажимаю на кнопку - включается соответствующий контент. Не работает.

function showIt() {
  var chart = document.getElementsByClassName('chart');
  var button = document.getElementsByTagName('input');

  function hideAll() {
    for (i = 0; i < chart.length; i++) {
      chart[i].style.display = 'none';
    }
  }

  for (i = 0; i < button.length; i++) {
    switch (chart[i]) {
      case chart[0]:
        hideAll();
        chart[0].style.display = 'block';
        break;
      case chart[1]:
        hideAll();
        chart[1].style.display = 'block';
        break;
      case chart[2]:
        hideAll();
        chart[2].style.display = 'block';
        break;
      case 3:
        hideAll();
        chart[3].style.display = 'block';
        break;
    }
  }
}
.chart {
  display: none;
}
<ul class="navigation">
  <a class="main" href="#url">Choose year</a>
  <li class="n2"><input type="button" value="2011" onclick="showIt()"></li>
  <li class="n3"><input type="button" value="2012" onclick="showIt()"></li>
  <li class="n4"><input type="button" value="2013" onclick="showIt()"></li>
  <li class="n5"><input type="button" value="2014" onclick="showIt()"></li>
</ul>
<div id="charts">
  <div class="chart" id="chart_div1" style="width: 100%; height: 25px;">1</div>
  <div class="chart" id="chart_div2" style="width: 100%; height: 25px;">2</div>
  <div class="chart" id="chart_div3" style="width: 100%; height: 25px;">3</div>
  <div class="chart" id="chart_div4" style="width: 100%; height: 25px;">4</div>
</div>

4
  • 1
    Уже проходили это несколько часов назад. Это учебное задание с заданной вёрсткой, что ли?
    – Regent
    26 апр 2018 в 10:23
  • Нет. Я пробовал сделать это же задание на чистом JS. Всё получилось, кроме этой мелочи. Мне надо на JS понять, как это делается, без jQuery, именно в моём подходе. Какую-то мелочь упускаю. Какую - не могу понять.
    – Alex
    26 апр 2018 в 10:32
  • Нет, не мелочь. Связка for-switch-case, лишенная смысла, - это, согласитесь, не мелочь. А насчет "без jQuery" - правильно ли я понимаю, что вы код, написанный с использованием jQuery, не сможете перевести в код без jQuery?
    – Regent
    26 апр 2018 в 10:36
  • Не смогу. jQuery только поверхностно осваивал. Пока что погружаюсь в JavaScript, пробуя всё делать только с ним.
    – Alex
    26 апр 2018 в 10:38

1 ответ 1

2

У вас в функции showIt никак не определяется какая кнопка была нажата. Соответственно, и нужный блок из-за этого определить не получится.
Так как религия не позволяет мне использовать onclick без веских на то причин, то в ответе используется addEventListener. Логика же функции-обработчика события click от этого не меняется.

Вариант с опорой на порядок кнопок и блоков:

var charts = document.getElementsByClassName("chart");
var buttons = document.getElementsByTagName("input");
for (var button of buttons) {
  button.addEventListener("click", function() {
    for (var i = 0; i < buttons.length; i++) {
      charts[i].style.display = (buttons[i] == this) ? "block" : "none";
    }
  });
}
.chart {
  display: none;
}
<ul class="navigation">
  <a class="main" href="#url">Choose year</a>
  <li class="n2"><input type="button" value="2011" /></li>
  <li class="n3"><input type="button" value="2012" /></li>
  <li class="n4"><input type="button" value="2013" /></li>
  <li class="n5"><input type="button" value="2014" /></li>
</ul>
<div id="charts">
  <div class="chart" id="chart_div1" style="width: 100%; height: 25px;">1</div>
  <div class="chart" id="chart_div2" style="width: 100%; height: 25px;">2</div>
  <div class="chart" id="chart_div3" style="width: 100%; height: 25px;">3</div>
  <div class="chart" id="chart_div4" style="width: 100%; height: 25px;">4</div>
</div>


Более гибкий вариант с использованием data-атрибута, в котором хранится ID соответствующего блока:

var charts = document.getElementsByClassName("chart");
var buttons = document.getElementsByTagName("input");
for (var button of buttons) {
  button.addEventListener("click", function() {
    var currentChart = document.getElementById(this.dataset.id);
    for (var chart of charts) {
      chart.style.display = (chart == currentChart) ? "block" : "none";
    }
  });
}
.chart {
  display: none;
}
<ul class="navigation">
  <a class="main" href="#url">Choose year</a>
  <li class="n2"><input type="button" value="2011" data-id="chart_div1" /></li>
  <li class="n3"><input type="button" value="2012" data-id="chart_div2" /></li>
  <li class="n4"><input type="button" value="2013" data-id="chart_div3" /></li>
  <li class="n5"><input type="button" value="2014" data-id="chart_div4" /></li>
</ul>
<div id="charts">
  <div class="chart" id="chart_div1" style="width: 100%; height: 25px;">1</div>
  <div class="chart" id="chart_div2" style="width: 100%; height: 25px;">2</div>
  <div class="chart" id="chart_div3" style="width: 100%; height: 25px;">3</div>
  <div class="chart" id="chart_div4" style="width: 100%; height: 25px;">4</div>
</div>

2
  • а через всплытие тут не более правильно? чтоб обработчки не плодить
    – torokhkun
    26 апр 2018 в 11:11
  • 1
    @torokhkun нет. Во-первых, с точки зрения логики нужна обработка нажатия на кнопки - странно при этом будет видеть обработку клика на какой-то родительский элемент. Во-вторых, с точки зрения ресурсов - да, добавление одного обработчика пройдёт быстрее (хотя и тут, и там время слишком мало, чтобы за это заморачиваться), но зато при срабатывании события вариант со всплытием будет работать дольше (опять же, всё равно время несущественно для события click). Так что основным аргументом остаётся первый, а про второй можно вспомнить в событиях, которые генерируются много раз за секунду.
    – Regent
    26 апр 2018 в 11:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.