Проблема при добавлении нового текста в список дел - PullRequest
Новая
       0

Проблема при добавлении нового текста в список дел

0 голосов
/ 07 апреля 2020

почему, когда я добавляю новый текст, он добавляет ко всем элементам? 

$('#btn').on('click', function() {
  let newTask = $('#input-text');
  if (newTask.val() === '') {
    alert('You need to write something');
  } else {
    let editButton = ('<button class = edit > Edit' + '</button>');
    let finishedButton = ('<button class = finished > Finished' + '</button>');
    let deleteButton = ('<button class = delete > Delete' + '</button>');
    let input = ('<input class= input>');

    $('#toDoList').append('<li>' + input + editButton + finishedButton + deleteButton + '</li>');
    $('.input').attr('value', newTask.val());
    newTask.val('');
  }
  
  $('.edit').on('click', function() {
    $('.input').prop('disabled', false);
  });
  
  $('.finished').on('click', function() {
    $(this).parent();
    $('#completed').append($(this).parent());
  });

  $('.delete').on('click', function() {
    $(this).parent().fadeOut(500, function() {
      $(this).remove();
    });
  });
});
body {
  background-color: ;
}

.container {
  display: block;
  width: 400px;
  margin: 300px auto;
  box-shadow: 5px 10px 100px #888888;
  min-height: 450px;
  max-height: auto;
}

.completed {
  margin-top: 3rem;
}

.to-do {
  margin-top: 3rem;
}

#btn {
  cursor: pointer;
}

.input {
  margin-top:
}

.text {
  text-align: center;
  color: #004690;
}

.color {
  color: green;
}

.color1 {
  color: red;
}

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

hr {
  width: 50%;
  margin-bottom: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta charset="UTF-8">
  <title>todo</title>
</head>

<body>
  <div class="container">
    <h1 class="text">To Do App</h1>
    <hr>
    <div class="input">
      <input id="input-text" type="text" name="" value="">
      <button id="btn">Add</button>
    </div>
    <div class="to-do">
      <h3 class="text color1">TO-do-list</h3>
      <hr>

      <ul id="toDoList">


      </ul>
    </div>
    <div class="completed">
      <h3 class="text color">Completed</h3>
      <hr>
      <ul id="completed">


      </ul>
    </div>
  </div>

  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/todo.js"></script>
</body>

</html>

1 Ответ

1 голос
/ 07 апреля 2020

Есть несколько проблем с вашим кодом, которые выходят за рамки вашего вопроса, которые я решил игнорировать.

Проблема связана с этой строкой, которая использует селектор класса , чтобы выбрать все ваши входы и обновить их значение. 

$('.input').attr('value', newTask.val());

Самое простое решение - создать вашу разметку ввода со значением, включенным с использованием интерполяции строк, например: 

$('#btn').on('click', function() {
  let newTask = $('#input-text');
  if (newTask.val() === '') {
    alert('You need to write something');
  } else {
    let editButton = ('<button class = edit > Edit' + '</button>');
    let finishedButton = ('<button class = finished > Finished' + '</button>');
    let deleteButton = ('<button class = delete > Delete' + '</button>');

    // Use string interpolation to create input markup with value already defined
    let input = `<input class="input" value="${newTask.val()}">`;

    // Append as usual
    $('#toDoList').append('<li>' + input + editButton + finishedButton + deleteButton + '</li>');

    // Below line is no longer needed so is commented out
    //$('.input').attr('value', newTask.val());

    // Your code continues unmodified
    newTask.val('');
  }
  
  $('.edit').on('click', function() {
    $('.input').prop('disabled', false);
  });
  
  $('.finished').on('click', function() {
    $(this).parent();
    $('#completed').append($(this).parent());
  });

  $('.delete').on('click', function() {
    $(this).parent().fadeOut(500, function() {
      $(this).remove();
    });
  });
});
body {
  background-color: ;
}

.container {
  display: block;
  width: 400px;
  margin: 300px auto;
  box-shadow: 5px 10px 100px #888888;
  min-height: 450px;
  max-height: auto;
}

.completed {
  margin-top: 3rem;
}

.to-do {
  margin-top: 3rem;
}

#btn {
  cursor: pointer;
}

.input {
  margin-top:
}

.text {
  text-align: center;
  color: #004690;
}

.color {
  color: green;
}

.color1 {
  color: red;
}

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

hr {
  width: 50%;
  margin-bottom: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta charset="UTF-8">
  <title>todo</title>
</head>

<body>
  <div class="container">
    <h1 class="text">To Do App</h1>
    <hr>
    <div class="input">
      <input id="input-text" type="text" name="" value="">
      <button id="btn">Add</button>
    </div>
    <div class="to-do">
      <h3 class="text color1">TO-do-list</h3>
      <hr>

      <ul id="toDoList">


      </ul>
    </div>
    <div class="completed">
      <h3 class="text color">Completed</h3>
      <hr>
      <ul id="completed">


      </ul>
    </div>
  </div>

  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/todo.js"></script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...