4

Estou com dificuldade de desenvolvimento quando falamos de for... O básico consigo entender agora na prática... Gente desenvolvi este código e acredito que ele possa ser reduzido para poucas linhas com for.

Repare que ele na troca do input range ele aparece botões diferentes (os determinados) e fecha as divs de botões abertos. Quando apertamos estes botões ele abre a div dele e fecha as demais.

Caso necessário disponibilizei o código simplificado que está abaixo!

Aqui começa o Js

        /* Dinâmica do Input Range */
        function updateTextInput(val) {

            /* Para controlar os Botões */
            if(val == 1){ 
                document.getElementById('um').style.display = "block";
                document.getElementById('dois').style.display = "block";
                document.getElementById('tres').style.display = "none";
                document.getElementById('quatro').style.display = "none";
                document.getElementById('cinco').style.display = "none";

            }
            if(val == 2){ 
                document.getElementById('um').style.display = "block";
                document.getElementById('dois').style.display = "block"; 
                document.getElementById('tres').style.display = "block";
                document.getElementById('quatro').style.display = "none";
                document.getElementById('cinco').style.display = "none";
            }
            if(val == 3){ 
                document.getElementById('um').style.display = "block";
                document.getElementById('dois').style.display = "block"; 
                document.getElementById('tres').style.display = "block";
                document.getElementById('quatro').style.display = "block";
                document.getElementById('cinco').style.display = "none";
            }
            if(val == 4){ 
                document.getElementById('um').style.display = "block";
                document.getElementById('dois').style.display = "block"; 
                document.getElementById('tres').style.display = "block";
                document.getElementById('quatro').style.display = "block";
                document.getElementById('cinco').style.display = "block";
            }

            /* Para controlar as Slide's Div */
            document.getElementById('slideum').style.display = "none";
            document.getElementById('slidedois').style.display = "none"; 
            document.getElementById('slidetres').style.display = "none";
            document.getElementById('slidequatro').style.display = "none";
            document.getElementById('slidecinco').style.display = "none";
        }

        /* Dinâmica do Input Button */
        function slideumf(){
            document.getElementById('slideum').style.display = "block";
            document.getElementById('slidedois').style.display = "none"; 
            document.getElementById('slidetres').style.display = "none";
            document.getElementById('slidequatro').style.display = "none";
            document.getElementById('slidecinco').style.display = "none";
        }
        function slidedoisf(){
            document.getElementById('slideum').style.display = "none";
            document.getElementById('slidedois').style.display = "block"; 
            document.getElementById('slidetres').style.display = "none";
            document.getElementById('slidequatro').style.display = "none";
            document.getElementById('slidecinco').style.display = "none";
        }
        function slidetresf(){
            document.getElementById('slideum').style.display = "none";
            document.getElementById('slidedois').style.display = "none"; 
            document.getElementById('slidetres').style.display = "block";
            document.getElementById('slidequatro').style.display = "none";
            document.getElementById('slidecinco').style.display = "none";
        }
        function slidequatrof(){
            document.getElementById('slideum').style.display = "none";
            document.getElementById('slidedois').style.display = "none"; 
            document.getElementById('slidetres').style.display = "none";
            document.getElementById('slidequatro').style.display = "block";
            document.getElementById('slidecinco').style.display = "none";
        }
        function slidecincof(){
            document.getElementById('slideum').style.display = "none";
            document.getElementById('slidedois').style.display = "none"; 
            document.getElementById('slidetres').style.display = "none";
            document.getElementById('slidequatro').style.display = "none";
            document.getElementById('slidecinco').style.display = "block";
        }
    </script>

Aqui começa o CSS

        /* Style Inicial dos Inputs Button */
        #um{display: none;}
        #dois{display: none;}
        #tres{display: none;}
        #quatro{display: none;}
        #cinco{display: none;}

        /* Style Inicial das Div's dos Slides */
        #slideum{display: none;}
        #slidedois{display: none;}
        #slidetres{display: none;}
        #slidequatro{display: none;}
        #slidecinco{display: none;}
    </style>
</head>

Aqui começa o HTML5

          <input type="range" name="rangeInput" min="1" max="4" onchange="updateTextInput(this.value);">
         <input id="um" type="button" value="1º Slide" onclick="slideumf()">
         <div id="slideum">
         <input type="range" min="1" max="5"><div id="slideum">1º Slide</div>
    <input id="dois" type="button" value="2º Slide" onclick="slidedoisf()">
    <div id="slidedois">2º Slide</div>
    <input id="tres" type="button" value="3º Slide" onclick="slidetresf()">
    <div id="slidetres">3º Slide</div>
    <input id="quatro" type="button" value="4º Slide" onclick="slidequatrof()">
    <div id="slidequatro">4º Slide</div>
    <input id="cinco" type="button" value="5º Slide" onclick="slidecincof()">
    <div id="slidecinco">5º Slide</div>
</body>

6
  • Posta o HTML também, se possível. Pois do contrário não teremos como testar possíveis soluções.
    – mau humor
    Commented 24/01/2017 às 21:51
  • Quando eu postei a pergunta, ela já acompanhava o HTML. Tá lá em baixo, kkk É curtinho mesmo! Commented 24/01/2017 às 21:53
  • A sim, não tinha rolado o suficiente. Mas é bom separar na hora de postar.
    – mau humor
    Commented 24/01/2017 às 21:53
  • Sou novo no fórum, não aprendi os macetes ainda! Vou tentar! Commented 24/01/2017 às 21:54
  • Uma coisa que percebi é que os dois primeiros botões são sempre usados. Então da para eliminar o primeiro if da primeira função e deixar as duas primeiras linhas antes dos if's.
    – mutlei
    Commented 24/01/2017 às 22:04

2 Respostas 2

5

Esse código pode ser muito reduzido... tem imensa repetição aí.

Sugestão (com ligeiras modificações no HTML -> ver exemplo em baixo):

var slides = Array.from(document.querySelectorAll('input[type="button"]'));
var slideTexts = Array.from(document.querySelectorAll('div'));

/* Dinâmica do Input Range */
function onSliderChange(val) {
    slides.forEach(function(slide, i) {
        slide.style.display = i <= val ? 'block' : 'none';
    });
    toggleSlidetext();
}

function toggleSlidetext(id) {
    var which = document.getElementById(id);
    slideTexts.forEach(function(div) {
        div.style.display = div == which ? 'block' : 'none';
    });
}

Explicação:

A ideia é colocar os elementos em questão em memória. slides e slideTexts é isso mesmo, arrais com ponteiros para os elementos.

Quando onSliderChange fôr chamado, percorre todos os slides e compara o index (i) com o val que lhe é passado. Depois chama toggleSlidetext sem nenhum valor, para esconder todos.

A lógica de toggleSlidetext é semelhante. Percorre todos os elementos e compara se o div a ser iterado é o mesmo que which. Também podiamos comparar assim:

div.style.display = div.id == id ? 'block' : 'none';

e dispensar a lógica do which.

Exemplo: https://jsfiddle.net/un3gkrvv/

var slides = Array.from(document.querySelectorAll('input[type="button"]'));
var slideTexts = Array.from(document.querySelectorAll('div'));

/* Dinâmica do Input Range */
function onSliderChange(val) {
    slides.forEach(function(slide, i) {
        slide.style.display = i <= val ? 'block' : 'none';
    });
    toggleSlidetext();
}

function toggleSlidetext(id) {
    var which = document.getElementById(id);
    slideTexts.forEach(function(div) {
        div.style.display = div == which ? 'block' : 'none';
    });
}
/* Style Inicial dos Inputs Button */

#um {
    display: none;
}

#dois {
    display: none;
}

#tres {
    display: none;
}

#quatro {
    display: none;
}

#cinco {
    display: none;
}


/* Style Inicial das Div's dos Slides */

#slideum {
    display: none;
}

#slidedois {
    display: none;
}

#slidetres {
    display: none;
}

#slidequatro {
    display: none;
}

#slidecinco {
    display: none;
}
<input type="range" name="rangeInput" min="1" max="4" onchange="onSliderChange(this.value);">
<input id="um" type="button" value="1º Slide" onclick="toggleSlidetext('slideum')">
<div id="slideum">1º Slide</div>
<input id="dois" type="button" value="2º Slide" onclick="toggleSlidetext('slidedois')">
<div id="slidedois">2º Slide</div>
<input id="tres" type="button" value="3º Slide" onclick="toggleSlidetext('slidetres')">
<div id="slidetres">3º Slide</div>
<input id="quatro" type="button" value="4º Slide" onclick="toggleSlidetext('slidequatro')">
<div id="slidequatro">4º Slide</div>
<input id="cinco" type="button" value="5º Slide" onclick="toggleSlidetext('slidecinco')">
<div id="slidecinco">5º Slide</div>

2
  • Obrigado Sergio! Era bem isso que eu queria... Tem como explicar um pouco seu raciocínio e o código? Valeuu Commented 24/01/2017 às 22:09
  • @GiancarloSolderaGraziano ótimo! Sim, claro, juntei explicação.
    – Sergio
    Commented 24/01/2017 às 22:16
3

O teu código tem alguns problemas de CSS (e, como o @Sergio explicou na resposta dele) muita repetição. Como a tua pergunta é de "como otimizar a função" eu resolvi dar mais uma achega. (link para exemplo no JSBin)

Começamos por redesenhar o teu HTML: um slide, na realidade, não é nada mais do que uma secção do teu site. No teu caso, com um botão que faz toggle ao conteúdo.

<input type="range" value="6" name="rangeInput" min="1" max="6" onchange="onSliderChange(this.value);" />
<section class="slide-wrap">
    <button class="toggle-slide" onclick="toggleSliderContent(this)">1º Slide</button>
    <div class="slide-content hidden">Conteudo do 1º Slide</div>
</section>

Ao removermos os Ids e adicionarmos classes, fazemos com que não só o nosso CSS seja muito mais pequeno como também o nosso Javascript seja mais conciso - uma vez que podemos apontar para varios elementos de uma vez só.

Todas as classes na secção acima, com excepção da hidden, são para o nosso Javascript.

Então, adicionamos ao CSS a simples regra de .hidden { display:none }

Passemos então ao Javascript: Agora que temos um HTML mais aprontado e já temos ali o onclick do botão, vamos atacar essa primeiro:

/** Quando clicamos no botão de mostrar o slide, o botão envia-se a ele mesmo
* como argumento, depois é só subirmos a DOM Tree até ao elemento parente e descermos
* à procura do element que contém o conteúdo do slide. Procuramos depois por um
* elemento que seja "slide-content" mas que não tenha a class "hidden" (e podemos 
* assumir que esse é o element que está visivel) - se este existir, então adicionarmos
* a class "hidden" e por fim removemos a class "hidden" do slide que queremos mostrar
*/
function toggleSliderContent(element) {
  var showSlideContent = element.parentNode.querySelector('.slide-content');
  var hidePrevious = document.querySelector('.slide-content:not(.hidden)');
  if (hidePrevious) hidePrevious.classList.add('hidden');
  showSlideContent.classList.remove('hidden');
}

Colmatamos a funcionalidade com a referencia do onchange do input:

var slides = document.querySelectorAll('section.slide-wrap');
/** Podias estar tentado a fazer um cast desta NodeList para array
* mas existem iteradores expecificos para a NodeList */

function onSliderChange(number) {
  var entry, slideElement, slideIndex;

  /** Para cada node na lista de slides, */
  for (entry of slides.entries()) {
    slideElement = entry[1];
    slideIndex = entry[0];

    /** se o index do slide que estamos a ver for menor que o numero
    * de slides que queremos mostrar e o elemento tiver a class "hidden"
    * então, remove a class para esse elemento aparecer: */
    if (slideIndex <= number && slideElement.classList.contains('hidden')) {
      slideElement.classList.remove('hidden');
    } else if (slideIndex >= number && !slideElement.classList.contains('hidden')) {
      /** de contrario, adiciona a class "hidden" para o elmento desaparecer */
      slideElement.classList.add('hidden');
    }
  }
}
6
  • Gostei muito dessa ideia de uma classe única para visibilidade, ainda mais da dinâmica da função com a ajuda dela. Já otimizei o código baseado na resposta do Sergio(nada impede de adaptar dnv) e quando estava seguindo adiante percebi que talvez ele possa ser otimizado mais ainda! Na mesma ideia do input range para criação dos slides, e a partir da definição do número de slides aparecer os botões aos respectivos, gostaria que quando apertasse nestes botões aparecesse um igual só que agr um input range perguntando qnts media queries(max 5) e um botão para cada uma delas. Te pergunto, tem como? Commented 25/01/2017 às 2:57
  • @GiancarloSolderaGraziano tens que explicar melhor isso que eu nao percebi
    – MoshMage
    Commented 25/01/2017 às 3:00
  • darei uma alterada na pergunta acrescentando o código que induz ao que eu quero fazer. Após isso acredito que entenderá! qlqr coisa só escrever aqui div kk Commented 25/01/2017 às 3:05
  • Pronto! Olha lá! Commented 25/01/2017 às 3:18
  • GiancarloSolderaGraziano vai ser mais facil abrires uma nova pergunta e separares os dois problemas para a resposta do @Sergio não ficar fora de scope [e a tua pergunta nao ser fechada por "ampla de mais"]
    – MoshMage
    Commented 25/01/2017 às 3:23

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 .