How to avoid repeating code that does the same thing for different Ids?

Asked

Viewed 189 times

4

There is a function onClick Javascript for each "Show more". This function changes the visibility of the div to Visible to which the default is Hidden.

However simple it is, the code is too big. Is there any way to shorten or lessen this?

Example: just a "Show more" button and a div? Then each click on "Show more" shows a div, one below the other?

<!DOCTYPE html>
<html>
<head>
<style>
  input{
    margin-top: 5px;
}

  input#abreBt{
    margin-left: 100px;
}

  input#bt1{
    margin-left: 50px;
}

  hr{
    width: 300px;
    float: left;
}
</style>
</head>
<body>

<input type="button" name="abreBt" id="abreBt" value="Mostrar mais" onClick="javascript: abreBts1();" />
<div name="divHidden" id="divHidden" style="visibility: hidden;">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>

<input type="button" name="abreBt" id="abreBt" value="Mostrar mais" onClick="javascript: abreBts2();" />
<div name="divHidden" id="divHidden2" style="visibility: hidden;">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>

<input type="button" name="abreBt" id="abreBt" value="Mostrar mais" onClick="javascript: abreBts3();" />
<div name="divHidden" id="divHidden3" style="visibility: hidden;">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>

</body>
</html>
<script>
  function abreBts1(){
    document.getElementById('divHidden').style.visibility="visible";
}

  function abreBts2(){
    document.getElementById('divHidden2').style.visibility="visible";
}

  function abreBts3(){
    document.getElementById('divHidden3').style.visibility="visible";
}
</script>
javascript html

  • Hello! Can you put in your question the code you are using to make your div? Read more here. I also suggest that you separate this question into 3 (create two other questions with your other questions) - it is better for you, who is asking, it is better for those who will answer, and it is better for the site.

  • I made the code and I forgot to put in the question...

  • Cool! I don’t know if it’s clear yet what you intend to do (maybe ask questions) but it’s already much better! + 1

2 answers

3


[Edited] I added the class. some and she is now responsible for adding visibility, so it is possible to always take the first element of this class and remove it. Any questions comment below.

jQuery('input').click(function(){
  jQuery(jQuery('.some').get(0)).removeClass('some')
});
  input{
    margin-top: 5px;
}

.some{
  visibility: hidden;
}

  input#abreBt{
    margin-left: 100px;
}

  input#bt1{
    margin-left: 50px;
}

  hr{
    width: 300px;
    float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="button" name="abreBt" id="abreBt" value="Mostrar mais" />
<div name="divHidden" id="divHidden" class="some">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>
</div>
<div class="t">
  <div name="divHidden" id="divHidden2"  class="some">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
  </div>
</div>
<div>

<div name="divHidden" id="divHidden3"  class="some">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>
</div>

  • I don’t know if I ended up being a little blunt about what I’d like to do, but I’ll try again. My idea was just to use a "Show more" button, so each time I clicked on it a div appeared every time I clicked. Sorry, I can’t remember any example to use

  • Got I’ll edit my answer!

  • All right, see if you can fix it!

  • @Mrvandaime I changed the code for the answer, any doubt communicate me.

  • that’s what even I was looking for, thank you very much.

1

first step, is to add some reference to div in the input, for such you can apply a data-custom.

(function () {
  var selecionado = document.querySelector(".visivel");
  document.addEventListener("click", function (event) {
    if (event.target.classList.contains("bt-titulo")) {
      var conteudoId = event.target.dataset.conteudo;
      var conteudo = document.getElementById(conteudoId);    
      if (selecionado) 
        selecionado.classList.remove("visivel");
      selecionado = conteudo;
      selecionado.classList.add("visivel");
    }
  });
})();
.div-conteudo {
  display: none;
}

.visivel {
  display: block;
}
<div id="titulos">
  <input type="button" id="titulo1" class="bt-titulo" data-conteudo="conteudo1" value="Mostrar Conteudo 1" />
  <input type="button" id="titulo2" class="bt-titulo" data-conteudo="conteudo2" value="Mostrar Conteudo 2" />
  <input type="button" id="titulo3" class="bt-titulo" data-conteudo="conteudo3" value="Mostrar Conteudo 3" />
</div>
<div id="conteudos">
  <div id="conteudo1" class="div-conteudo visivel">Conteudo 1</div>
  <div id="conteudo2" class="div-conteudo">Conteudo 2</div>
  <div id="conteudo3" class="div-conteudo">Conteudo 3</div>
</div>

Note that in the example above, the event click is associated with document and not to input, even if you add a input and their respective div dynamically, the behavior will remain consistent.

finally, a slightly more complex example.:

(function () {
  var selected = document.querySelector(".selected");
  var selecionado = document.querySelector(".visivel");
  var onTituloClick = function (event) {
    if (event.target.classList.contains("bt-titulo")) {
      var conteudoId = event.target.dataset.conteudo;
      var conteudo = document.getElementById(conteudoId);    
      if (selecionado) selecionado.classList.remove("visivel");
      if (selected) selected.classList.remove("selected");
      selecionado = conteudo;
      selecionado.classList.add("visivel");
      selected = event.target;
      selected.classList.add("selected");
    }
  }

  document.addEventListener("click", onTituloClick);
  if (selected) {
    onTituloClick({ target: selected });
  }
})();
.div-conteudo {
  display: none;
  box-sizing: border-box;
  border: 1px solid #00796B;
  border-top: 1px solid #009688;
  background-color: #009688;
  padding: 10px 24px;
  color: white;
}

.visivel {
  display: block;
}

#titulos .bt-titulo {
  background-color: #4DB6AC;
  border: 1px solid #00796B;
  border-bottom: 1px solid #009688;
  color: white;
  padding: 10px;
  cursor: pointer;
  float: left;
  box-sizing: border-box;
  width: calc(100% / 3);
}

#titulos .bt-titulo:not(:last-child) {
  border-right: none;
}

#titulos .bt-titulo:not(.selected) {
  border-bottom: 1px solid #00796B;
}

#titulos .bt-titulo:hover {
  background-color: #26A69A;
}

#titulos .bt-titulo.selected {
  background-color: #009688;
}

#titulos:after, #conteudos:after {
  content: "";
  display: table;
  clear: both;
}
<div id="titulos">
  <input type="button" id="titulo1" class="bt-titulo selected" data-conteudo="conteudo1" value="Mostrar Conteudo 1" />
  <input type="button" id="titulo2" class="bt-titulo" data-conteudo="conteudo2" value="Mostrar Conteudo 2" />
  <input type="button" id="titulo3" class="bt-titulo" data-conteudo="conteudo3" value="Mostrar Conteudo 3" />
</div>
<div id="conteudos">
  <div id="conteudo1" class="div-conteudo">Conteudo 1</div>
  <div id="conteudo2" class="div-conteudo">Conteudo 2</div>
  <div id="conteudo3" class="div-conteudo">Conteudo 3</div>
</div>

  • Very cool, I will probably mirror myself in the future, my knowledge in javascript is not yet very accurate, but still thank you.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.