我有这样的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>
我想知道,当我单击任何
textLayer
类时,都会从其父data-page-number="x"
获得.page div
属性。这里只需要javascript解决方案。
这基本上是PDF.js结构。
最佳答案
您可以使用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>