[英]how to get parent div data-attribute javascript
I have a HTML structure like this : 我有这样的HTML结构:
<div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;">
<div class="canvasWrapper" style="width: 816px; height: 1056px;">
<canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas>
</div>
<div class="textLayer" style="width: 816px; height: 1056px;">
some content
</div>
</div>
<div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;">
<div class="canvasWrapper" style="width: 816px; height: 1056px;">
<canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas>
</div>
<div class="textLayer" style="width: 816px; height: 1056px;">
some content
</div>
</div>
I want to know that when I click on any textLayer
class, I will get data-page-number="x"
attribute from its parent .page div
. 我想知道,当我单击任何textLayer
类时,都将从其父.page div
获得data-page-number="x"
属性。
Only javascript solution required here. 这里只需要javascript解决方案。
This is basically PDF.js structure. 这基本上是PDF.js结构。
You could use parentNode.dataset to retrieve data attribute of parent node. 您可以使用parentNode.dataset检索父节点的data属性。
var textLayer = document.querySelector('.textLayer'); textLayer.addEventListener('click', function(e) { console.log('page number: ' + e.target.parentNode.dataset.pageNumber); console.log('label: ' + e.target.parentNode.dataset.pageLabel); console.log('loaded: ' + e.target.parentNode.dataset.loaded); });
<div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;"> <div class="canvasWrapper" style="width: 816px; height: 1056px;"> <canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas> </div> <div class="textLayer" style="width: 816px; height: 1056px;"> some content </div> </div>
$(".textLayer").on("click",function() {
$(this).parent().attr("data-page-number");
});
pure js: 纯js:
var classname = document.getElementsByClassName("textLayer");
var myFunction = function() {
var attribute = this.parentElement.getAttribute("data-page-number");
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
// even shorter version //更短的版本
var elems = document.getElementsByClassName("textLayer").forEach(function(element){
element.addEventListener('click', function(){
var attribute = this.parentElement.getAttribute("data-page-number");
}, false);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.