Привязка button к блоку

209

27 апреля 2018, 10:45

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

<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>

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

Answer 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>

Answer 2

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

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>

Answer 3

Для решения данной задачи правильнее всего будет использовать цикл для генерации кнопок и блоков (переменная 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как спарсить hostname?

У меня в браузере установлено прокси socks5 и запущено браузерное приложение с постоянно меняющимся hostname, то можно как-нибудь cпарсить этот...

176

Java

Переход внутри приложения

Решил попробовать сделать приложение под Android, раньше никогда для телефонов вообще не создавалПока-что решил сделать простой браузер, но уже...

174

Java

На строке 558 (которую я отметил в kоде ) выдает ошибку. Помогите пожалйуста [требует правки]

313

Java

Выпадающий список с данными из бд

Создаю CRUD приложениеЕсть две таблицы type и category:

356