传递的值命名方式:可以字母+数字
html代码:
<div class="search-address-content">
<div class="search-address-title">海南 </div>
<ul class="search-address-list parents-item" data-name="a">
<li>海口0</li>
<li>三亚0</li>
<li>澄迈0</li>
<li>琼海0</li>
<li>儋州0</li>
</ul>
<div class="search-address-title">广东 </div>
<ul class="search-address-list parents-item" data-name="b">
<li>海口1</li>
<li>三亚1</li>
<li>澄迈1</li>
<li>琼海1</li>
<li>儋州1</li>
</ul>
<div class="search-address-title">广西 </div>
<ul class="search-address-list parents-item" data-name="c">
<li>海口2</li>
<li>三亚2</li>
<li>澄迈2</li>
<li>琼海2</li>
<li>儋州2</li>
</ul>
</div>
js代码:
//注:给点击当前元素的父类添加.parents-item和data-name属性
function getItemValue() {
var thisItem=$(event.target);-----得到当前点击的元素
var thisItemIndex=thisItem.index();-----当前元素在列表中的索引值
var thisItemAttr=thisItem.parents('.parents-item').data('name')-----获取元素对应的data-name属性值
console.log(thisItemAttr+thisItemIndex);
}
$('.search-address-list li').on('click',function(){
getItemValue();
});
js中用到了 html5的 data-*自定义属性,需要深入了解的请自行百度,或参考别人写的文章:https://www.cnblogs.com/dolphinX/p/3348458.html
控制台打印结果: