2
我正在使用intro.js創建教程，並且有點卡住了。 我想教程，強調這些3項圖像中突出以下指定類中的元素 - HTML
首先紅色元素，則藍色元素，然後將綠色複選框。查看源代碼（該頁面使用各種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">以及如何指定正確的tickbox，如果代碼中有多個type="checkbox"。
問題是什麼？ '指定課程'時遇到問題 - 你是什麼意思？請說明你正在嘗試做什麼。 –
@BradEvans更新。 – MapMan