Allow to open only one div

Asked

Viewed 92 times

0

Code to call the Divs:

<input style="float: right;" class="botao1" onclick="addRisco()" value="Adicionar Risco"/>
  </td>
     </tr>
 </table>
        </fieldset>
<div id="riscos">

</div>
<fieldset class="grupo">
    <table width="100%" class="campo" cellspacing="10">
        <tr>
        <td>
 <input style="float: right;" class="botao1" onclick="addRisco1()" value="Acção"/>
  </td>
     </tr>
 </table>
<div id="riscos1">

</div>

With this function every time I click the button opens a div:

function addRisco(){ 
$("#riscos").append("<div>"+$("#riscoform").html()+"</div>"); 
} 
function addRisco1(){ 
$("#riscos1").append("<div>"+$("#riscoform1").html()+"</div>"); 
}

But I intend that the function only allows to open once the div.

javascript

  • How you call the addRisco() and addRisco1() functions. Enter their call code.

  • You can put an id on div and check if it already exists before doing the append,a simple solution, what do you think?

2 answers

5


When using the method one(), the function is executed only once for each element.

place an id for each element

$("#botao").one("click", function(){
    $("#riscos").append("<div>"+$("#riscoform").html()+"</div>"); 
}); 

$("#botao1").one("click", function(){
    $("#riscos1").append("<div>"+$("#riscoform1").html()+"</div>"); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  id="botao" style="float: right;" class="botao1" value="Adicionar Risco"/>
  </td>
     </tr>
 </table>
        </fieldset>
<div id="riscos">

</div>
<fieldset class="grupo">
    <table width="100%" class="campo" cellspacing="10">
        <tr>
        <td>
 <input id="botao1" style="float: right;" class="botao1" value="Acção"/>
  </td>
     </tr>
 </table>
<div id="riscos1">

</div>

With the function one() it is not necessary to check whether tem Filhosthat is, descending elements of the selected element

$("#botao").one("click", function(){
    $("#riscos").append("<div>"+$("#riscoform").html()+"</div>"); 
}); 

$("#botao1").one("click", function(){
    $("#riscos1").append("<div>"+$("#riscoform1").html()+"</div>"); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset class="grupo">
<input  id="botao" style="float: right;" class="botao1" value="Adicionar Risco"/>

<div id="riscos"></div>

<br><br>
 <input id="botao1" style="float: right;" class="botao1" value="Acção"/>

<div id="riscos1"></div>

.one()

  • Dude, I didn’t know this method!

1

Try it this way:

function addRisco(){
    var temFilhos = $("#riscos").find("div").length > 0;

    if(!temFilhos){
        $("#riscos").append("<div>"+$("#riscoform").html()+"</div>"); 
    }
} 

function addRisco1(){ 
    var temFilhos = $("#riscos1").find("div").length > 0;

    if(!temFilhos){
        $("#riscos1").append("<div>"+$("#riscoform1").html()+"</div>"); 
    }
}

Tip: Start to have the habit of coining your code, even when writing test codes, over time you will do it naturally. Helps a lot to visualize the html hierarchy, and facilitates a lot in maintenance.

Browser other questions tagged javascript

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