我有这样的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>

08-25 10:20
查看更多