jQuery - onClick get content of this attributes id's equals variable html

Question

I have a list of templates html. onClick of anchor tag, HTML should be fetched and display as output which is equal to this attribute id.

Eg: If I click of 01 link, output should be Content 01, 02 should bring Content 2 etc...

Currently I am getting clicked rp-wp-template-id as wpt_bars_1 etc... instead I want to get the varibale html which is equalent to this id.

Desired output should be: Output: Content 1, 2 etc...

jsFiddle

jQuery(document).on('click', '.wp-templates-list li a', function(e) {
  var _self = jQuery(this);
  var _wp_template_id = _self.attr('rp-wp-template-id');
  var wpt_bars_1 = 'Content 1';
  var wpt_bars_2 = 'Content 2';
  var wpt_bars_3 = 'Content 3';
  var wpt_bars_4 = 'Content 4';
  var wpt_bars_5 = 'Content 5';
  jQuery('#getHtmlContainer').html('Output: ' + _wp_template_id);
});

body {
  font-family: verdana;
  font-size: 13px;
}

li {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  display: block;
  color: #0066cc;
  background-color: #fefefe;
  border: 1px solid #ccc;
  padding: 5px;
  width: 80%;
  margin: 0 auto 20px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="wp-templates-list">
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_1">01</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_2">02</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_3">03</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_4">04</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_5">05</a></li>
</ul>

<div id="getHtmlContainer">Output: </div>

mplungjan · Accepted Answer · 2020-11-17 06:03:22Z

2

You need an object

You can also get closer to the LI in your delegation

const bars = {
  'wpt_bars_1': 'Content 1',
  'wpt_bars_2': 'Content 2',
  'wpt_bars_3': 'Content 3',
  'wpt_bars_4': 'Content 4',
  'wpt_bars_5': 'Content 5',
}

$('.wp-templates-list').on('click', 'li a', function(e) {
  var _self = $(this);
  var _wp_template_id = _self.attr('rp-wp-template-id');
  $('#getHtmlContainer').html('Output: ' + bars[_wp_template_id]);
});

body {
  font-family: verdana;
  font-size: 13px;
}

li {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  display: block;
  color: #0066cc;
  background-color: #fefefe;
  border: 1px solid #ccc;
  padding: 5px;
  width: 80%;
  margin: 0 auto 20px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wp-templates-list">
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_1">01</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_2">02</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_3">03</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_4">04</a></li>
  <li><a href="javascript:;" rp-wp-template-id="wpt_bars_5">05</a></li>
</ul>

<div id="getHtmlContainer">Output: </div>

answered Nov 17, 2020 at 6:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reddy Over a year ago

@mplugjan, thanks for the perfect answer... I am accepting and upvoting your answer. Thanks for your time.

Collectives™ on Stack Overflow

jQuery - onClick get content of this attributes id's equals variable html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related