0

Есть такой список с кнопками:

<ul class="navigation">
<a class="main" href="#url">Choose year</a>
<li class="n1"><input type="button" value="2010" onclick="showIt()"></li>
<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 id="chart_div1" style="width: 100%; height: 500px;display:none"></div>
<div id="chart_div2" style="width: 100%; height: 500px;display:none"></div>
<div id="chart_div3" style="width: 100%; height: 500px;display:none"></div>
<div id="chart_div4" style="width: 100%; height: 500px;display:none"></div>
<div id="chart_div5" style="width: 100%; height: 500px;display:none"></div>

</div>

Каким образом будет выглядеть динамическая функция, чтоб не убивать себя написанием функции для каждого блока?

0

3 ответа 3

4

Если не менять вёрстку и рассчитывать только на порядок кнопок и блоков, то так:

var $buttons = $(".navigation input");
var $blocks = $("#charts div");

$buttons.on("click", function() {
  var index = $buttons.index(this);
  $blocks.eq(index).show();
});
<ul class="navigation">
  <a class="main" href="#url">Choose year</a>
  <li class="n1"><input type="button" value="2010" /></li>
  <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 id="chart_div1" style="width: 100%; height: 500px;display:none">2010</div>
  <div id="chart_div2" style="width: 100%; height: 500px;display:none">2011</div>
  <div id="chart_div3" style="width: 100%; height: 500px;display:none">2012</div>
  <div id="chart_div4" style="width: 100%; height: 500px;display:none">2013</div>
  <div id="chart_div5" style="width: 100%; height: 500px;display:none">2014</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если нужно показывать только блок последней нажатой кнопки, то меняется одна строка кода:

$blocks.hide().eq(index).show();

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

var $buttons = $(".navigation input");

$buttons.on("click", function() {
  var blockId = $(this).data("blockid");
  $("#" + blockId).show();
});
<ul class="navigation">
  <a class="main" href="#url">Choose year</a>
  <li class="n1"><input type="button" value="2010" data-blockid="chart_div1" /></li>
  <li class="n2"><input type="button" value="2011" data-blockid="chart_div2" /></li>
  <li class="n3"><input type="button" value="2012" data-blockid="chart_div3" /></li>
  <li class="n4"><input type="button" value="2013" data-blockid="chart_div4" /></li>
  <li class="n5"><input type="button" value="2014" data-blockid="chart_div5" /></li>
</ul>
<div id="charts">
  <div id="chart_div1" style="width: 100%; height: 500px;display:none">2010</div>
  <div id="chart_div2" style="width: 100%; height: 500px;display:none">2011</div>
  <div id="chart_div3" style="width: 100%; height: 500px;display:none">2012</div>
  <div id="chart_div4" style="width: 100%; height: 500px;display:none">2013</div>
  <div id="chart_div5" style="width: 100%; height: 500px;display:none">2014</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2

Для решения данной задачи правильнее всего будет использовать цикл для генерации кнопок и блоков (переменная count - киличество блоков и кнопок к ним), а для скрытия/показа блока функцию toggle:

let $blocks = $('.blocks')
let $buttons = $('.buttons')
let count = 10

for (let i = 0; i < count; i++) {
	let $block = $(`<div class="block" id="chart_div${i}" style="width: 100%; height: 20px;display:none">${i}</div>`)
  let $button = $(`<li class="n3"><input class="button" type="button" value="${i}"></li>`)
  
  $blocks.append($block)
  $buttons.append($button)
}

$('.button').click((el) => {
	$(`#chart_div${el.target.value}`).toggle()
})
.blocks{
  display: flex;
  width: 200px;
  flex-direction: column;
}

.block{
  width: 100%;
  height: 20px;
  border: 1px solid;
}

.bittons{
  display: flex;
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks"></div>
<ul class="buttons"></ul>

1

$(document).on('click', '.navigation input', function() {
  var block_id = $(this).data('block-id');
  $('#charts div').hide(); // если нужно сперва скрыть все блоки;
  $('#charts #chart_div' + block_id).show();
});
#charts div {
  display: none;
  width: 100%; 
  height: 500px;  
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>

  <body>
    <ul class="navigation">
      <a class="main" href="#url">Choose year</a>
      <li><input type="button" value="2010" data-block-id="1"></li>
      <li><input type="button" value="2011" data-block-id="2"></li>
      <li><input type="button" value="2012" data-block-id="3"></li>
      <li><input type="button" value="2013" data-block-id="4"></li>
      <li><input type="button" value="2014" data-block-id="5"></li>
    </ul>

    <div id="charts">
      <div id="chart_div1">Блок 1</div>
      <div id="chart_div2">Блок 2</div>
      <div id="chart_div3">Блок 3</div>
      <div id="chart_div4">Блок 4</div>
      <div id="chart_div5">Блок 5</div>
    </div>
  </body>
</html>

6
  • 1, Зачем использовать делегирование событий там, где это не нужно? 2. Зачем искать элемент с заданным ID (который должен быть уникальным, а элемент - прекрасно находиться по нему) только среди дочерних элементов какого-то элемента?
    – Regent
    26 апр 2018 в 7:18
  • 1. Не особо понял что имелось в виду, но лучше повесить событие разово в js, чем писать onClick в html (это уже давно не актуал считаю). 2. Согласен что ID элемента предполагает его уникальность и особого смысла обращаться к родителю нет, это просто сработала привычка.
    – RifmaMan
    26 апр 2018 в 7:28
  • Нет, использовать onclick я никому не советую. Речь про $(document).on('click', '.navigation input', ... vs $('.navigation input').on('click', ...
    – Regent
    26 апр 2018 в 7:39
  • Опять же, привычка, для меня так проще и наглядней, существенной разницы думаю не будет от выбора того или другого способа объявления события.
    – RifmaMan
    26 апр 2018 в 7:47
  • Разница очень существенная. Первый вариант навесит обработчик события на динамически создаваемые элементы. Есть свои плюсы и минусы. Второй вариант навесит обработчик только на уже существующие элементы. 26 апр 2018 в 10:59

Ваш ответ

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

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