创建一个切换按钮，在图层打开和图层关闭时更改文本

Question

我创建了这段代码，它制作了一个切换按钮，可以在传单中打开和关闭图层。打开和关闭图层可以正常工作。但我也希望切换按钮中的文本发生变化。当传单地图上有图层时，它必须说："Layer on"，当地图上没有图层时，它需要说："Layer off"。我尝试实施

$(this).text(function(i, text){
    return text == 'Layer off';
});

和

$(this).text(function(i, text){
     return text == 'Layer on';
});

但它在按钮中返回了文本 "false"。这是我使用的功能：

$("#layerControl").click(function(event) {
  layerClicked = window[event.target.value];
  if (map.hasLayer(layerClicked)) {
    map.removeLayer(layerClicked);
    $(this).text(function(i, text) {
      return text == 'Layer off';
    });
  } else {
    map.addLayer(layerClicked);
    $(this).text(function(i, text) {
      return text == 'Layer on';
    });
  }
});

编辑

我正在尝试在选择列表中进行更改后再次触发该功能。这是我目前拥有的代码，但它还没有用：

$('#slctListValue').change(function ()
{
        $("#layerControl").click(function( event ) {
                    layerClicked = window[event.target.value];
                        if (map.hasLayer(layerClicked)) {
                            map.removeLayer(layerClicked);
                            $(this).text('Layer Off');
                        }
                        else{
                            map.addLayer(layerClicked);
                            $(this).text('Layer On');
                        } ;

        });
});

Answer 1

试试这个

text == 'Layer off'; // not-work!    
text = 'Layer off'; // work!

Answer 2

我建议根据当前文本内容有条件地返回字符串值，而不是返回布尔值。

下面，我使用 ternary operator 来确定新文本。

$('button').on('click', function() {
  $('#output').text(function(i, text) {
    return text == 'Layer off' ? 'Layer on' : 'Layer off';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">CLICK ME</button>
<div id="output">Layer off</div>

编辑：

但是，根据您的代码的精神和意图，我可能只是根据图层是否显示设置适当的文本。两个不同的条件可能只会使事情复杂化并引入意外行为。

$("#layerControl").click(function(event) {
  layerClicked = window[event.target.value];
  if (map.hasLayer(layerClicked)) {
    map.removeLayer(layerClicked);
    $(this).text('Layer Off');
  } else {
    map.addLayer(layerClicked);
    $(this).text('Layer On');
  }
});

创建一个切换按钮，在图层打开和图层关闭时更改文本

Create a toggle button that changes text when layer is on and when layers is off

javascript

jquery

layer

togglebutton

leaflet

编辑：