Problems in the identification of the div

Question

Problems in the identification of the div

Asked 4 years, 5 months ago

Viewed 46 times

-1

I am trying to make a list of tasks to be simple where you have inserted tasks dynamically, there is a checkbox in each task that when being checked puts a line-through in the text, but in doing this he always puts in the first tasks and the others does nothing, I wonder if you have how to identify each one, keeping it dynamic, follows below the code

$(document).ready(function(){
    $(document).keypress(function(e) {
        if(e.which == 13) $('#button').click();
    });
    
    $('#button').click(function(){
        var textAdd = $('#inpudAdd').val();
        $('#inpudAdd').val('');
        $('#div').append('<div id = divinha><input class = "mano" id = "check" type="checkbox"> ' + textAdd +'<img id = "lixo" src="imagens/lixeira.png" alt="" height="20px">' +'</div>');
    });
    $(document).on("change","#check",function(){


    
        if ($(this).is(":checked"))
        {
            $('#divinha').addClass('marcar');
        }
        else
        {
            $('#divinha').removeClass('marcar');
        }
    
    });

    /*$(document).on("click.primeiro",'#check', function() {
        $('#divinha').addClass('seila');
        console.log("meu");
    });
    $(document).on("click.segundo",'#check', function() {
        $('#divinha').removeClass('seila')
        console.log("meu");
    });*/
    $(document).on("click",'#lixo', function() {
        if(confirm("Voce realmente deseja excluir esse item?")==true){
            $('#divinha').remove();
        }

    });
});

.marcar{
    text-decoration: line-through;
}
.CentralizarDiv{

    width: 50%;
    margin: auto;
    height: 70vh;
    overflow: auto;
}
.centralizarInp{
    
    width: 50%;
    display:block;
    margin: 0 auto;
    padding: 10px 0 10px 0;
    margin-top: 10px;
    margin-bottom: 20px;

    
}
.centralizarBut{
    
    width: 50%;
    display:block;
    padding: 10px 0 10px 0;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2{
    width: 50%;
    margin: auto;
}
table{
    
    width: 50%;
    margin: 0 auto;
}
.secBut{
    width: 100%;
    padding: 10px 0 10px 0;
}

<html>
    <head>
        <link rel="stylesheet" href="css/css.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src = "js/js.js"></script>
        
    </head>
    <body>
        <h2>Lista de Tarefas</h2>
        <input class="centralizarInp" type="text" name="checkListItem" id="inpudAdd"/>
        <button class = "centralizarBut " id="button">OK</button>
        <table >
            <tr><td><button id = "incopleto" class="secBut">Em Progresso</button></td>
            <td><button id = "completo"class="secBut">Finalizadas</button></td>
            <td><button id = "todos" class="secBut">Todos</button></td>
        </tr>
        </table>
        
        <div class="CentralizarDiv" id= "div" ></div>
        
    </body>
</html>

1 answer

Browser other questions tagged javascript html jquery css

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

by Augusto Vasques • **15,321** points · Answer 1 · 2020-01-23T04:27:22+00:00

To solve the problem proposed in the question, which is to select the <div> to which the checkbox that was clicked, you can use the jQuery method .parent() which will return the parent of an element in case the object that will generate the event.

It is also possible to simplify the event change of checkbox replacing every test block derived from the condition is(":checked") by the jQuery method .toggleClass() adding or removing one or more classes of each element in the element, or set of elements, depending on the presence of the class.

One problem I was able to verify in your code is the sharing of the attribute id between the dynamic elements. A HTML5 recommendation with regard to attribute id is active:

The attribute id specifies the unique identifier (ID) of your element. The value must be unique among all Ids in the subtree initial element and must contain at least one character. Value not must contain space characters.

In this case all elements div dynamically created are getting the same id

  <div id = divinha>

The browsers so far are tolerant of the breach of this rule, but it is a good practice to respect because:

if you need to validate your code (request from a company or a TCC) the generated HTML will not be approved.
If at any given time browser manufacturers decide to adhere to this recommendation their code will no longer work.
if you need to use methods with getElementById() will be impossible as research methods based on id will be compromised.

To solve the problem with the id I created a counter that is attached to the id of <div> dynamics, keeping the interior elements their respective identifiers.

var count = 1; //Criei um contador para ser adicionad o id da <div>

$(document).ready(function() {
  $(document).keypress(function(e) {
    if (e.which == 13) $('#button').click();
  });

  $('#button').click(function() {
    var textAdd = $('#inpudAdd').val();
    $('#inpudAdd').val('');
    //Concatena o contador ao id da <div>
    $('#div').append('<div id = "divinha' + count + '"><input class = "mano" id = "check" type="checkbox"> ' + textAdd + '<img id = "lixo" src="imagens/lixeira.png" alt="" height="20px">' + '</div>');
    count++; //incrementa o contador para próxima chamada
  });


  $(document).on("change", "#check", function() {

    //O código do evento simplificado
    $(this).parent().toggleClass('marcar');

  });

  /*$(document).on("click.primeiro",'#check', function() {
      $('#divinha').addClass('seila');
      console.log("meu");
  });
  $(document).on("click.segundo",'#check', function() {
      $('#divinha').removeClass('seila')
      console.log("meu");
  });*/
  $(document).on("click", '#lixo', function() {
    if (confirm("Você realmente deseja excluir esse item?") == true) {
      $(this).parent().remove();// Não vi o botão no sandbox mas mantive o mesmo princípio adotado nos checkbox
    }

  });
});

.marcar {
  text-decoration: line-through;
}

.CentralizarDiv {
  width: 50%;
  margin: auto;
  height: 70vh;
  overflow: auto;
}

.centralizarInp {
  width: 50%;
  display: block;
  margin: 0 auto;
  padding: 10px 0 10px 0;
  margin-top: 10px;
  margin-bottom: 20px;
}

.centralizarBut {
  width: 50%;
  display: block;
  padding: 10px 0 10px 0;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

h2 {
  width: 50%;
  margin: auto;
}

table {
  width: 50%;
  margin: 0 auto;
}

.secBut {
  width: 100%;
  padding: 10px 0 10px 0;
}

<html>

<head>
  <link rel="stylesheet" href="css/css.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/js.js"></script>

</head>

<body>
  <h2>Lista de Tarefas</h2>
  <input class="centralizarInp" type="text" name="checkListItem" id="inpudAdd" />
  <button class="centralizarBut " id="button">OK</button>
  <table>
    <tr>
      <td><button id="incopleto" class="secBut">Em Progresso</button></td>
      <td><button id="completo" class="secBut">Finalizadas</button></td>
      <td><button id="todos" class="secBut">Todos</button></td>
    </tr>
  </table>

  <div class="CentralizarDiv" id="div"></div>

</body>

</html>