Identifying clicked elements

Question

I'm relatively new to web development. I started learning JavaScript a few months ago and it's going well. I made this code for someone on fiverr, and it got the job done, but I know there's a more efficient way to write this without using a click handler for each element. There has to be a way to know which element is clicked and show the proper one without a separate click handler for each element.

Here's the Codepen link to the code.

HTML

<div>
  <a href="#" id="item-1">Item 1</a>
  <a href="#" id="item-2">Item 2</a>
  <a href="#" id="item-3">Item 3</a>
  <a href="#" id="item-4">Item 4</a>
</div>
<div class="item-container">
  <div class="item-block" id="1">
      <h1>Item 1</h1>
      <p>This is Item 1 content</p>
  </div>
  <div class="item-block" id="2">
    <h1>Item 2</h1>
    <p>This is item 2 content</p>
  </div>
  <div class="item-block" id="3">
    <h1>Item 3</h1>
    <p>This is item 3 content</p>
  </div>
  <div class="item-block" id="4">
    <h1>Item 4</h1>
    <p>This is item 4 content</p>
  </div>
</div>

CSS

.item-block {
  display: none;
}

JS

$(document).ready(function() {
  $('#1').show();
})

$('#item-1').click(function() {
  $('.item-block').hide();
  $('#1').show();
})

$('#item-2').click(function() {
  $('.item-block').hide();
  $('#2').show();
})

$('#item-3').click(function() {
  $('.item-block').hide();
  $('#3').show();
})

$('#item-4').click(function() {
  $('.item-block').hide();
  $('#4').show();
})

Jamal · Accepted Answer · 2015-03-26 16:08:25Z

3

In the HTML, give some id to your div with links, like this:

<div id="links">
  <a href="#" id="item-1">Item 1</a>
  <a href="#" id="item-2">Item 2</a>
  <a href="#" id="item-3">Item 3</a>
  <a href="#" id="item-4">Item 4</a>
</div>

Then change your JavaScript like this:

$("#links > a").click(function(){
   $('.item-block').hide();
   $("#"+this.id.replace("item-","")).show();
})

edited Mar 26, 2015 at 16:08

Jamal

35.2k13 gold badges134 silver badges238 bronze badges

answered Mar 24, 2015 at 19:08

nicael

1463 bronze badges

1

\$\begingroup\$ Thanks! I like the way this one works the best. That id replace function is super handy. \$\endgroup\$

Zack Bridges
– Zack Bridges

2015-03-30 21:15:53 +00:00
Commented Mar 30, 2015 at 21:15

Add a comment |

zzzzBov · Accepted Answer · 2015-03-24 19:17:16Z

First, improve your HTML so that the links are actually links:

<div class="links">
  <a href="#1">Item 1</a>
  <a href="#2">Item 2</a>
  <a href="#3">Item 3</a>
  <a href="#4">Item 4</a>
</div>
<div class="item-container">
  <div class="item-block" id="1">
      <h1>Item 1</h1>
      <p>This is Item 1 content</p>
  </div>
  <div class="item-block" id="2">
    <h1>Item 2</h1>
    <p>This is item 2 content</p>
  </div>
  <div class="item-block" id="3">
    <h1>Item 3</h1>
    <p>This is item 3 content</p>
  </div>
  <div class="item-block" id="4">
    <h1>Item 4</h1>
    <p>This is item 4 content</p>
  </div>
</div>

Then, simplify the logic:

$('.links').on('click', 'a', function (e) {
    $(this.hash)
        .show()
        .siblings()
        .hide();
});

Stack Exchange Network

Identifying clicked elements

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Identifying clicked elements

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions