如何从 -类获取特殊值信息<strong>？

Question

我试图从给定菜单vis_item中的强书面类中提取data-group-id-值。HTML代码看起来像这样:

<div class="vis_item" align="center">
<a class="group-menu-item" data-group-id="0" data-group-type="all" href="#" data-title="">1</a>
<strong class="group-menu-item" data-group-id="1234567" data-group-type="static" data-title="">2</strong>
<a class="group-menu-item"  [.....] </a>
</div>

我用了以下几行:

var group_menu = document.getElementsByClassName("vis_item"); //Get Menu-Class
var active_group_class = group_menu.innerHTML("strong"); // Get Active Menu Point
var active_group_id = active_group_class.data-group-id; // extra data-group-id Value

我做错了什么?

Answer 1

你的js有一些问题

• getElementsByClassName返回数组
• 没有innerHTML()这个功能
• 获取数据属性值需要使用dataset

var group_menus = document.getElementsByClassName("vis_item"); // first vis items
Array.from(group_menus).forEach(group_menu => {                // loop through vis items
var active_group_class = group_menu.querySelector("strong"); // Get strong tag
var active_group_id = active_group_class.dataset.groupId;    // get data-group-id Value
console.log(active_group_id)
})

<div class="vis_item" align="center">
<a class="group-menu-item" data-group-id="0" data-group-type="all" href="#" data-title="">1</a>
<strong class="group-menu-item" data-group-id="1234567" data-group-type="static" data-title="">2</strong>
<a class="group-menu-item" [.....] </a>
</div>

Answer 2

从元素的dataset属性中访问数据项，如下所示:

let active_group_id = active_group_class.dataset.groupId

另外，innerHTML不像你使用它一样工作- https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

你的问题不是很清楚你是如何使用代码的，所以我不能建议一个替代方案，但你需要选择元素使用像this的东西，如果基于onclick或click事件，或者你可以通过父元素的子元素循环找到strong。

这也有点不清楚为什么你有一个strong在一堆锚标签。