我正在使用 intro.js 创建教程，但有点卡住了。 我希望教程突出显示下图中突出显示的这 3 个项目
首先是红色元素，然后是蓝色元素，然后是绿色复选框。查看源代码(页面是使用各种 JS 文件动态生成的)我可以看到正在生成的类，但在指定特定类时遇到问题。下面是红色区域的源码(比较长，请见谅)
<div class="layer-list bound-visible">
<ul>
<li class="layer layer-info parent-layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-visible expanded"></a></div>
<span class="layer-actions bound-invisible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></span> <span class="widget bound-invisible"></span> <label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-mapservice-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-invisible"><a title="" href="javascript: void(0)" class="layer-list-legend-icon"></a></span> <span class="display-name">Operational Layers</span> </label>
</li>
<li class="layer">
<ul class="legend-list bound-invisible"></ul>
<div class="bound-visible">
<ul class="layers">
<li class="layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-visible expanded"></a></div>
<div class="layer-info layer-enabled">
<div class="layer-actions bound-invisible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></div>
<div class="widget bound-visible">
<div class="widget">
<div class="transparency-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 100%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
</div>
</div>
<label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-layer-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-invisible"><a title="" href="javascript: void(0)" class="layer-list-legend-icon"></a></span> <span class="display-name">COMPASS2_Conservation</span> </label>
</div>
<ul class="legend-list bound-invisible"></ul>
<ul class="layers bound-visible">
<ul class="layers">
<li class="layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-invisible collapsed"></a></div>
<div class="layer-info layer-enabled">
<div class="layer-actions bound-visible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></div>
<div class="widget bound-invisible"></div>
<label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-layer-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-visible"><a title="Protected Trees - Legend" href="javascript: void(0)" class="layer-list-legend-icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAABhQTFRF/v//7vXx3evhyeHQstW9mMiodbuNOqxqxn3uOQAAAAh0Uk5TAP/////////VylQyAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgUlEQVQokY2S2w7AMAhCVxX5/z9e223ZpZLM11PAErft3zSTyCAR2JSIDJGUpJKBRI28i+il3yDMCuVE1SLgOYul2cGy2CNO0VqIX35L2E2+YRZxrRHmTcm+YfYwhCRvdnQEQ/rs5C7ZAIS18bf+zPtKa1sDiQnKuwl1ALN96fiaHTYBBEJVsaCYAAAAAElFTkSuQmCC"></a></span> <span class="display-name">Protected Trees</span> </label>
</div>
<ul class="legend-list bound-invisible">
<ul>
<li class="legend-item leaf clear">
<div class="legend-item children layer-contents">
<div title="Protected Trees" class="legend-swatch"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAABhQTFRF/v//7vXx3evhyeHQstW9mMiodbuNOqxqxn3uOQAAAAh0Uk5TAP/////////VylQyAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgUlEQVQokY2S2w7AMAhCVxX5/z9e223ZpZLM11PAErft3zSTyCAR2JSIDJGUpJKBRI28i+il3yDMCuVE1SLgOYul2cGy2CNO0VqIX35L2E2+YRZxrRHmTcm+YfYwhCRvdnQEQ/rs5C7ZAIS18bf+zPtKa1sDiQnKuwl1ALN96fiaHTYBBEJVsaCYAAAAAElFTkSuQmCC"></div>
<span title="Protected Trees" class="legend-item-label">Protected Trees</span>
</div>
</li>
</ul>
</ul>
<ul class="layers bound-invisible"></ul>
</li>
</ul>
<ul class="layers">
<li class="layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-invisible collapsed"></a></div>
<div class="layer-info layer-enabled">
<div class="layer-actions bound-visible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></div>
<div class="widget bound-invisible"></div>
<label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-layer-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-visible"><a title="Click to see legend information for this layer" href="javascript: void(0)" class="layer-list-legend-icon"><img src="Resources/Images/Icons/legend-16.png"></a></span> <span class="display-name">Listed Buildings</span> </label>
</div>
<ul class="legend-list bound-invisible">
<ul>
<li class="legend-item leaf clear">
<div class="legend-item children layer-contents">
<div title="I" class="legend-swatch"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAAAZQTFRF/v//p5nAeU643QAAAAJ0Uk5TAP9bkSK1AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAFElEQVQokWNgoAFgxAJGpUalqA4AJ0wBkeEX5OEAAAAASUVORK5CYII="></div>
<span title="I" class="legend-item-label">I</span>
</div>
</li>
</ul>
<ul>
<li class="legend-item leaf clear">
<div class="legend-item children layer-contents">
<div title="II" class="legend-swatch"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAAAZQTFRF/v//v92Uk2hV+QAAAAJ0Uk5TAP9bkSK1AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAFElEQVQokWNgoAFgxAJGpUalqA4AJ0wBkeEX5OEAAAAASUVORK5CYII="></div>
<span title="II" class="legend-item-label">II</span>
</div>
</li>
</ul>
<ul>
<li class="legend-item leaf clear">
<div class="legend-item children layer-contents">
<div title="II*" class="legend-swatch"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAAAZQTFRF/v//lMD/gnwoNAAAAAJ0Uk5TAP9bkSK1AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAFElEQVQokWNgoAFgxAJGpUalqA4AJ0wBkeEX5OEAAAAASUVORK5CYII="></div>
<span title="II*" class="legend-item-label">II*</span>
</div>
</li>
</ul>
</ul>
<ul class="layers bound-invisible"></ul>
</li>
</ul>
<ul class="layers">
<li class="layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-invisible collapsed"></a></div>
<div class="layer-info layer-enabled">
<div class="layer-actions bound-visible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></div>
<div class="widget bound-invisible"></div>
<label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-layer-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-visible"><a title="Scheduled Ancient Monuments - Legend" href="javascript: void(0)" class="layer-list-legend-icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAAAxQTFRF/v//6cKohnBg4qt/lElJmQAAAAR0Uk5TAP///7MtQIgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAArSURBVCiRY2DAAxhxAJAUE1YAkWLGAoiRQrdnVGpwS5ETy7iTDQ6AL4ECABbVA7Xx4JQyAAAAAElFTkSuQmCC"></a></span> <span class="display-name">Scheduled Ancient Monuments</span> </label>
</div>
<ul class="legend-list bound-invisible">
<ul>
<li class="legend-item leaf clear">
<div class="legend-item children layer-contents">
<div title="Scheduled Ancient Monuments" class="legend-swatch"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAAAxQTFRF/v//6cKohnBg4qt/lElJmQAAAAR0Uk5TAP///7MtQIgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAArSURBVCiRY2DAAxhxAJAUE1YAkWLGAoiRQrdnVGpwS5ETy7iTDQ6AL4ECABbVA7Xx4JQyAAAAAElFTkSuQmCC"></div>
<span title="Scheduled Ancient Monuments" class="legend-item-label">Scheduled Ancient Monuments</span>
</div>
</li>
</ul>
</ul>
<ul class="layers bound-invisible"></ul>
</li>
</ul>
<ul class="layers">
<li class="layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-invisible collapsed"></a></div>
<div class="layer-info layer-enabled">
<div class="layer-actions bound-visible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></div>
<div class="widget bound-invisible"></div>
<label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-layer-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-visible"><a title="Conservation Areas - Legend" href="javascript: void(0)" class="layer-list-legend-icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAAAZQTFRF/v//dE0AiLHxHwAAAAJ0Uk5TAP9bkSK1AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAT0lEQVQokbXRwQoAIAgDUP3/n66TztkCgzwU+AiZmV3KRf2ifebs6MWFVqkYERoTWaG0TmGYiwxfkZ0je59VTEXu20DTkfs2xpGffnlOshbfOwFc9elasgAAAABJRU5ErkJggg=="></a></span> <span class="display-name">Conservation Areas</span> </label>
</div>
<ul class="legend-list bound-invisible">
<ul>
<li class="legend-item leaf clear">
<div class="legend-item children layer-contents">
<div title="Conservation Areas" class="legend-swatch"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAAXNSR0IB2cksfwAAAAZQTFRF/v//dE0AiLHxHwAAAAJ0Uk5TAP9bkSK1AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAT0lEQVQokbXRwQoAIAgDUP3/n66TztkCgzwU+AiZmV3KRf2ifebs6MWFVqkYERoTWaG0TmGYiwxfkZ0je59VTEXu20DTkfs2xpGffnlOshbfOwFc9elasgAAAABJRU5ErkJggg=="></div>
<span title="Conservation Areas" class="legend-item-label">Conservation Areas</span>
</div>
</li>
</ul>
</ul>
<ul class="layers bound-invisible"></ul>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<ul>
<li class="layer layer-info parent-layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-visible expanded"></a></div>
<span class="layer-actions bound-invisible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></span> <span class="widget bound-invisible"></span> <label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-mapservice-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-invisible"><a title="" href="javascript: void(0)" class="layer-list-legend-icon"></a></span> <span class="display-name">BaseMaps</span> </label>
</li>
<li class="layer">
<ul class="legend-list bound-invisible"></ul>
<div class="bound-visible">
<ul class="layers">
<li class="layer bound-visible">
<div class="layer-item-expander"><a href="javascript: void(0)" class="tree-expander bound-invisible expanded"></a></div>
<div class="layer-info layer-enabled">
<div class="layer-actions bound-invisible"><a title="Click to see layer actions available for this layer" href="javascript: void(0)" class="chevron-right-16"></a></div>
<div class="widget bound-visible">
<div class="widget">
<div class="transparency-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 100%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
</div>
</div>
<label class="layer-contents"> <span class="layer-item-ctrl"><input type="checkbox"></span> <span class="layer-item-ctrl layer-list-layer-icon bound-invisible"><img src="" title=""></span> <span class="layer-item-ctrl bound-invisible"><a title="" href="javascript: void(0)" class="layer-list-legend-icon"></a></span> <span class="display-name">baseMapCached</span> </label>
</div>
<ul class="legend-list bound-invisible"></ul>
<ul class="layers bound-visible"></ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
这是我正在使用的代码 intro.js 代码，它没有被拾取。
{
element: '.layer-item-ctrl',
intro: "This is the checkbox to turn layers on and off - CLASS"
}
我使用了 http://www.hongkiat.com/blog/introjs-step-by-step-guide-tutorial/ 中的教程开始。
所以我的问题是，如果有多个 <label class="layer-contents">，我该如何指定正确的蓝色区域？在代码中以及如何指定正确的复选框，如果有多个 type="checkbox"在代码中。
最佳答案
使用以下方法让它工作
document.querySelectorAll('[class="toolbar-item toolbar-group bound-visible"]')[0]
关于javascript - 从类中指定元素 - HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33499832/