从类中指定元素 - HTML
我正在使用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"，如何指定正确的复选框。
1 个答案:
答案 0 :(得分：1)
使用以下
工作document.querySelectorAll('[class="toolbar-item toolbar-group bound-visible"]')[0]
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？