There is such a list with buttons:

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

And there are such blocks that need to be shown by clicking on a specific button in the list.

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

How will the dynamic function look like so as not to kill oneself by writing a function for each block?

    3 answers 3

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

    • 1, Why use event delegation where it is not needed? 2. Why look for an element with a given ID (which must be unique, and an element is fine to be on it) only among the child elements of some element? - Regent
    • 1. I didn’t really understand what was meant, but it’s better to hang the event one-time in js than to write onClick in html (I’ve not considered this any longer). 2. I agree that the ID of the element implies its uniqueness and there is not much point in contacting the parent, it just worked. - RifmaMan
    • No, I do not advise anyone to use onclick . Speech about $(document).on('click', '.navigation input', ... vs $('.navigation input').on('click', ... - Regent
    • Again, the habit, for me it is easier and clearer, I think there will be no significant difference from the choice of one or the other way of announcing an event. - RifmaMan
    • The difference is very significant. The first option will hang an event handler on dynamically created elements. There are pros and cons. The second option will only hang the handler on already existing elements. - Klimenkomud

    If you do not change the layout and rely only on the order of buttons and blocks, then so:

     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>

    If you want to show only the block of the last button pressed, then one line of code changes:

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

    Greater flexibility and independence from the order of elements can be achieved if each button contains (for example, a data attribute) the ID of the corresponding block:

     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>

      To solve this problem, it will be best to use the cycle to generate buttons and blocks (the variable count is the kilicity of the blocks and buttons to them), and to hide / show the block the toggle function:

       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>