使用jQuery通过span类获取检查元素

Question

我正在使用一个插件，该插件基于我在单独的javascript文件中定义的标签创建一个span类元素。我想创建一个eventListener，当复选框被选中时，使用jQuery在span类中引用文本。但是，我不确定如何为每个标签类#leaflet- layerstreet -header-label输入引用span类。

类似于这里的例子，添加了一个map函数来获取集合。

每个标签的元素引用如下:

<label class="layerstree-header-label">
<input type="checkbox" class="control-layers-selector">
<span class="layerstree-header-name">7211</span>
</label>

Answer 1

您可以为复选框附加change事件的事件侦听器，并使用.siblings来查找span

$(".control-layers-selector").on("change", function(e) {
if ($(this).is(':checked'))
console.log($(this).siblings('span').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="layerstree-header-label">
<input type="checkbox" class="control-layers-selector">
<span class="layerstree-header-name">7211</span>
</label>
<label class="layerstree-header-label">
<input type="checkbox" class="control-layers-selector">
<span class="layerstree-header-name">9090</span>
</label>
<label class="layerstree-header-label">
<input type="checkbox" class="control-layers-selector">
<span class="layerstree-header-name">9090</span>
</label>

Answer 2

所以我发现我必须引用模块的容器才能获得选择的文本。有效的解决方案如下(有@Tushar的贡献):

var layerControl = L.control.layers.tree (baseMaps, overlaysTree, {
collapsed: false
})
var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
if ($(this).is(':checked'))
console.log($(this).siblings('span').text());
});