Question

我试图隐藏/显示div取决于复选框，但无法使其工作。我已经看过许多示例，教程，但无法使它们适应我的情况。似乎有很多方法可以做到这一点。

以下是我的代码的一部分：

<div id="layer-control">
    <p>Selectionnez les couches pour les afficher sur la carte.</p>
    <div id="reciprocite">
        <nav id='filter-group-reci' class='filter-group-reci'></nav>
        <div id='recipro-polygon' class='legend' style="display:none;">>
            <div><span style='background-color: #e6d94c' 'opacity:0.45'></span>GPV (adhérent URNE)</div>
            <div><span style='background-color: #010492' 'opacity:0.45'></span>GPRMV (adhérent URNE)</div>
            <div><span style='background-color: #179201' 'opacity:0.45'></span>EH3VV (adhérent URNE)</div>
            <div><span style='background-color: #920104' 'opacity:0.45'></span>GAP </div>
            <div><span style='background-color: #404040' 'opacity:0.45' ></span>AAPPMA Non réciprocitaires</div>
        </div>
    </div>
    <div id="rivieres">
        <nav id='filter-group-rivieres' class='filter-group-rivieres'></nav>
        <div id='rivieres-line' class='legend'>
            <div><span style="background-color: #0400ff; height: 4px"></span>1ère Catégorie DPF</div>
            <div><span style="background-color: #6ea5f2; height: 2px"></span>1ère Catégorie</div>
            <div><span style="background-color: #c110b6; height: 4px"></span>2ème Catégorie DPF</div>
            <div><span style="background-color: #e48ff5; height: 2px"></span>2ème Catégorie</div>
            <span><em>*Domaine Public Fluvial</em></span>
        </div>
    </div>

var layers = document.getElementById('filter-group-reci');
var layers2 = document.getElementById('filter-group-rivieres');
var layers3 = document.getElementById('filter-group-parcours');

toggleLayer('Réciprocité', ['reciprocite-gpv', 'reciprocite-gap','reciprocite-gprmv','reciprocite-non-recipro','reciprocite-eh3vv']);
toggleLayer2('Catégories Piscicoles',['cours-deau-large-1ere-dpf', 'cours-deau-m-1ere-dpf','cours-deau-s-1ere-dpf','cours-deau-large-2eme-dpf', 'cours-deau-m-2eme-dpf','cours-deau-s-2eme-dpf','cours-deau-large-1ere', 'cours-deau-m-1ere','cours-deau-s-1ere','cours-deau-large-2eme', 'cours-deau-m-2eme','cours-deau-s-2eme'])

//Bouton réciprocité
function toggleLayer(name,ids) {
  var input = document.createElement('input');
          input.type = 'checkbox';
          input.id = ids;
          input.checked = false;
          layers.appendChild(input);
  var label = document.createElement('label');
         label.setAttribute('for', ids);
          label.textContent = name;
          layers.appendChild(label);

        input.onclick = function (e) {
        e.stopPropagation();
        for (layers in ids){
            var visibility = map.getLayoutProperty(ids[layers], 'visibility');
            if (visibility === 'visible') {
                map.setLayoutProperty(ids[layers], 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(ids[layers], 'visibility', 'visible');
            }
         }

    };

}

//Bouton Catégorie piscicoles
function toggleLayer2(name,ids) {
  var input = document.createElement('input');
          input.type = 'checkbox';
          input.id = ids;
          input.checked = true;
          layers2.appendChild(input);
  var label = document.createElement('label');
         label.setAttribute('for', ids);
          label.textContent = name;
          layers2.appendChild(label);

        input.onclick = function (e) {
        e.stopPropagation();
        for (layers in ids){
            var visibility = map.getLayoutProperty(ids[layers], 'visibility');
            if (visibility === 'visible') {
                map.setLayoutProperty(ids[layers], 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(ids[layers], 'visibility', 'visible');
            }
             }

        };

    }

首先，我读过可能使用CSS，“input：checked~” 我试过了：

    .legend {
    display:none;
}
#reciprocite-gpv,reciprocite-gap,reciprocite-gprmv,reciprocite-non-recipro,reciprocite-eh3vv input:checked ~ .legend {
  display: block;
}

没有用，也许我造成了语法错误？

然后我尝试使用javascript（或者是JQuery？）

$(function(){
        $("input[type=checkbox]").change(function(){
            if ($(this).is(":checked")){
                $(this).next("div").css("display","block");
            } else {
                $(this).next("div").css("display","none");
            }
        });

        $("input[type=checkbox]").change();

    });

有人能给我一个提示如何实现这个目标吗？

Answer 1

您可以使用onclick创建切换功能并检查是否选中了复选框。根据结果，您可以更改div的文字。

看看这个plunker。这里我用的是纯JavaScript。当您使用jQuery时，您还可以使用div.html("your text")来更改文本。

更改下一个div显示 - 输入值

1 个答案: