jQuery - onClick获取此属性id的等于变量html的内容
jQuery - onClick获取此属性id的等于变量html的内容
提问于 2020-11-17 05:55:38
我有一个模板的列表html。onClick的锚标记，应该获取和显示为输出，等于这个属性id。
：如果我点击01链接，输出应该是Content 01，02应该带Content 2等等。
目前我正在被点击rp-wp-template-id作为wpt_bars_1等.相反，我想得到变量html，它等于这个id。
期望的输出应该是：输出:内容1、2等.
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-17 06:03:22
你需要一个物体
你也可以在你的代表团里接近李。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64870015
复制相关文章
相似问题
腾讯云开发者
