1

Olá,

Fiz um filtro de filiais para a minha empresa, porém empaquei em uma pendência.

Quero que a pessoa escolha a região da filial e navegue pelo conteúdo desse button e que o conteúdo desapareça, caso ela aperto o mesmo botão ou escolha outra região.

Código atual HTML:

<form style="display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;">
            <input id="button"type="button" class="cb" value="Sul" name="1" id="1" onclick="itemSelectS(this)" onblur="showDivAttidS(this)"/>
            <input id="button"type="button" class="cb" value="Sudeste" name="2" id="2" onclick="itemSelectSE(this)"  onblur="showDivAttidSE(this)"/>
            <input id="button"type="button" class="cb" value="Centro - Oeste" name="3" id="3" onclick="itemSelectCO(this)" onblur="showDivAttidCO(this)"/>
            <input id="button"type="button" class="cb" value="Norte / Nordeste" name="4" id="4" onclick="itemSelectNEN(this)" onblur="showDivAttidNEN(this)"/>
    </form>


 <div style="display:none" id="1">Nenhuma filial cadastrada!</div>
 <div style="display:none" id="2">Nenhuma filial cadastrada!</div>
 <div style="display:none" id="3">Nenhuma filial cadastrada!</div>
 <div style="display:none" id="4">Nenhuma filial cadastrada!</div>

<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

CSS:

    #button {
  background-color:rgba(110, 74, 74, 0.103);
  border-color: #415f78 ;
  border-width: 3px;
  width: 450px;
  height: 50px;
  border-radius: 5px;
}

#button[value]{
  color: #415f78;
}

#button:hover{
  background-color: #415f78;
  border-color: forestgreen;
  -webkit-transition-delay: 0.1s; 
  -moz-transition: .1s all;   
  -moz-transition-delay: 0.1s; 
  -ms-transition: .1s all;   
  -ms-transition-delay: 0.1s; 
  -o-transition: .1s all;   
  -o-transition-delay: 0.1s; 
  transition: .1s all;   
  transition-delay: 0.1s; 
}

#button[value]:hover{
  color: white;
  -webkit-transition-delay: 0.1s; 
  -moz-transition: .1s all;   
  -moz-transition-delay: 0.1s; 
  -ms-transition: .1s all;   
  -ms-transition-delay: 0.1s; 
  -o-transition: .1s all;   
  -o-transition-delay: 0.1s; 
  transition: .1s all;   
  transition-delay: 0.1s; 
}

JS:

    function itemSelectS() {
    document.getElementById('1').style.display = "block";
}
function itemSelectSE() {
    document.getElementById('2').style.display = "block";
}
function itemSelectCO() {
    document.getElementById('3').style.display = "block";
}
function itemSelectNEN() {
    document.getElementById('4').style.display = "block";
}

function showDivAttidS(){
    document.getElementById("1").style.display = 'none';

}
function showDivAttidSE(){
    document.getElementById("2").style.display = 'none';

}
function showDivAttidCO(){
    document.getElementById("3").style.display = 'none';

}
function showDivAttidNEN(){
    document.getElementById("4").style.display = 'none';

}

Do jeito que está, caso eu clique em algum link, ou qualquer coisa do conteúdo, ele desaparece como se tivesse fechado, devido ao onblur.Procurei por pessoas que tenham passado por algo parecido mas não encontrei a solução.

1 Resposta 1

0

Cara, não precisa repetir tantas funções. Com apenas 2 funções você consegue o que precisa.

Agora, não repita id's, é incorreto no HTML. Outra coisa, não use nomes de id's começando com número (veja esta documentação).

Com isso, removi os id's dos buttons (não é necessário), pois você pode pegar o valor do name e passar como id de cada div.

Com apenas duas funções, uma para o click e outra para o blur, você consegue fazer tudo o que deseja de acordo como explicou:

function itemSelect(e) {
   var el = document.getElementById(e.name); // pega o elemento
   // alterna entre "block" e "none"
   el.style.display = el.style.display == "none" ? "block" : "none";
}

function showDivAttid(){
   // oculta todas as divs
   var divs = document.querySelectorAll(".divs");
   for(var x=0; x < divs.length; x++){
      divs[x].style.display = 'none';
   }
}
   #button {
  background-color:rgba(110, 74, 74, 0.103);
  border-color: #415f78 ;
  border-width: 3px;
  width: 450px;
  height: 50px;
  border-radius: 5px;
}

#button[value]{
  color: #415f78;
}

#button:hover{
  background-color: #415f78;
  border-color: forestgreen;
  -webkit-transition-delay: 0.1s; 
  -moz-transition: .1s all;   
  -moz-transition-delay: 0.1s; 
  -ms-transition: .1s all;   
  -ms-transition-delay: 0.1s; 
  -o-transition: .1s all;   
  -o-transition-delay: 0.1s; 
  transition: .1s all;   
  transition-delay: 0.1s; 
}

#button[value]:hover{
  color: white;
  -webkit-transition-delay: 0.1s; 
  -moz-transition: .1s all;   
  -moz-transition-delay: 0.1s; 
  -ms-transition: .1s all;   
  -ms-transition-delay: 0.1s; 
  -o-transition: .1s all;   
  -o-transition-delay: 0.1s; 
  transition: .1s all;   
  transition-delay: 0.1s; 
}
<form style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">
   <input id="button"type="button" class="cb" value="Sul" name="r1" onclick="itemSelect(this)" onblur="showDivAttid()"/>
   <input id="button"type="button" class="cb" value="Sudeste" name="r2" onclick="itemSelect(this)"  onblur="showDivAttid()"/>
   <input id="button"type="button" class="cb" value="Centro - Oeste" name="r3" onclick="itemSelect(this)" onblur="showDivAttid()"/>
   <input id="button"type="button" class="cb" value="Norte / Nordeste" name="r4" onclick="itemSelect(this)" onblur="showDivAttid()"/>
</form>

<div class="divs" style="display:none" id="r1">S: Nenhuma filial cadastrada!</div>
<div class="divs" style="display:none" id="r2">SE: Nenhuma filial cadastrada!</div>
<div class="divs" style="display:none" id="r3">CW: Nenhuma filial cadastrada!</div>
<div class="divs" style="display:none" id="r4">NE: Nenhuma filial cadastrada!</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .