CODEWITHSUNDEEP
jqueryhtml
NeedH8
NeedH8

Reputation: 482

How to target clicked element to a specific element to show its description

We have blocks with buttons. Each button targets its [data-description] to a specific block, which shows the [data-description] to its targeted content-block. Now I manualy set if function, like: 

if (targetElement == 'text-pack-1')
if (targetElement == 'text-pack-2')

And the question is how NOT manualy write if condition, so the each button block knows where its targeted?

function modalBox() {
  $('.list-labels').each(function(i) {
    i++;
    $(this).addClass('pack-' + i);       
  });
  $('.content-block').each(function(i) {
    i++;
    $(this).addClass('text-pack-' + i);       
  });
  
  $('.pack').on('click', function() {
    var targetElement = $(this).data('target')
    
    if (targetElement == 'text-pack-1') {
      var descrip = $(this).data('description')
      $('.text-pack-1').text(descrip)
    }
    if (targetElement == 'text-pack-2') {
      var descrip = $(this).data('description')
      $('.text-pack-2').text(descrip)
    }
    
  })
}

modalBox()
* {
  box-sizing: border-box
}
body {
  margin: 100px;
  background: #39A2AE;
  font-family: 'PT Sans', sans-serif;
}
ul {
  margin-bottom: 20px;
}
.pack {
  color: #fff;
  cursor: pointer;
 }

li {
  margin-bottom: 5px;
}
.content-block {
  padding: 20px;
  border: 2px solid #fff;
  margin: 30px 0;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-labels"> 
  <li><div class="pack" data-target="text-pack-1" data-description="Button-1">Button-1</a></li>
  <li><div class="pack" data-target="text-pack-1" data-description="Button-2">Button-2</a></li>
  <li><div class="pack" data-target="text-pack-1" data-description="Button-3">Button-3</a></li>
  <li><div class="pack" data-target="text-pack-1" data-description="Button-4">Button-4</a></li>
</ul>

<ul class="list-labels">
  <li><div class="pack" data-target="text-pack-2" data-description="Button-5">Button-5</a></li>
  <li><div class="pack" data-target="text-pack-2" data-description="Button-6">Button-6</a></li>
  <li><div class="pack" data-target="text-pack-2" data-description="Button-7">Button-7</a></li>
  <li><div class="pack" data-target="text-pack-2" data-description="Button-8">Button-8</a></li>
</ul>

<div class="content-block">
  
</div>
<div class="content-block">
  
</div>

Upvotes: 1

Views: 42

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can massively simplify the logic here if you relate the .list-label elements to the .content-block by their index. Try this:

$('.list-labels div').click(function() {
  var $div = $(this);
  var index = $div.closest('.list-labels').index('.list-labels');
  $('.content-block').eq(index).text($div.data('description'));
});
* {
  box-sizing: border-box
}
body {
  margin: 100px;
  background: #39A2AE;
  font-family: 'PT Sans', sans-serif;
}
ul {
  margin-bottom: 20px;
}
.pack {
  color: #fff;
  cursor: pointer;
}
li {
  margin-bottom: 5px;
}
.content-block {
  padding: 20px;
  border: 2px solid #fff;
  margin: 30px 0;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list-labels"> 
  <li><div class="pack" data-description="Button-1">Button-1</div></li>
  <li><div class="pack" data-description="Button-2">Button-2</div></li>
  <li><div class="pack" data-description="Button-3">Button-3</div></li>
  <li><div class="pack" data-description="Button-4">Button-4</div></li>
</ul>

<ul class="list-labels">
  <li><div class="pack" data-description="Button-5">Button-5</div></li>
  <li><div class="pack" data-description="Button-6">Button-6</div></li>
  <li><div class="pack" data-description="Button-7">Button-7</div></li>
  <li><div class="pack" data-description="Button-8">Button-8</div></li>
</ul>

<div class="content-block"></div>
<div class="content-block"></div>

As you can see from the example, the first .list-labels sets the first .content-block, the second sets the second, and so on. The code will work for any number of elements without amendment, and saves on having to create ugly unique classes on the elements, having to have a rigid data-target attribute set, and most importantly the if statement.

Upvotes: 1

Related Questions