[英]Change next div display - input value
I'm trying to hide/show a div depending on a checkbox, but can't make it work. 我试图根据复选框隐藏/显示div,但无法使其正常工作。 I've seen many examples, tutorials, but couldn't adapt them to my case.
我看过很多示例和教程,但无法将它们调整为适合我的情况。 It seems there are a lot of ways to do that.
似乎有很多方法可以做到这一点。
Here is part of my code: 这是我的代码的一部分:
<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');
}
}
};
}
First, I've read that it may be possible using CSS, with "input:checked ~ " i tried: 首先,我读到它可以使用CSS进行输入,我尝试使用“ input:checked〜”:
.legend {
display:none;
}
#reciprocite-gpv,reciprocite-gap,reciprocite-gprmv,reciprocite-non-recipro,reciprocite-eh3vv input:checked ~ .legend {
display: block;
}
Didn't work, maybe I caused a syntax error? 没用,可能是我引起了语法错误?
Then i tried using javascript (or is it JQuery?) 然后我尝试使用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();
});
Could anyone give me a hint how to accomplish this? 谁能给我一个提示如何实现这一目标?
You can use onclick
to create a toggle-function and check, whether the checkbox is checked or not. 您可以使用
onclick
创建切换功能并检查该复选框是否被选中。 Depending on the result you change the text of your div
. 根据结果,您可以更改
div
的文本。
Take a look at this plunker . 看看这个矮子 。 Here I used plain JavaScript.
在这里,我使用了普通的JavaScript。 As you use jQuery you could also use
div.html("your text")
to change the text. 使用jQuery时,也可以使用
div.html("your text")
更改文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.