jQuery / Javascript Невозможно заставить кнопку «галочка» пролистать текст названия элемента в добавленном списке. - PullRequest
Новая
       84

jQuery / Javascript Невозможно заставить кнопку «галочка» пролистать текст названия элемента в добавленном списке.

0 голосов
/ 16 марта 2020

Попытка создать вход, который создает элемент списка, введенный во вход. После создания этого вновь созданного элемента я пытаюсь дать пользователю возможность нажать кнопку «проверить» и изменить название элемента на «зачеркнутый».

Я пытался использовать делегирование событий для нажатия кнопки на добавленных элементах, но не может заставить ее работать!

Любая помощь будет принята с благодарностью! 

$(function() {
  $(".shopping-list").empty(); //clear the list when the browser is loaded for the first time

  $('#js-shopping-list-form').submit(event => { //submission event

    event.preventDefault() //prevent default submission behavior

    //grab the value written in the add an item input
    const shopItemEntry = $(event.currentTarget).find(
      'input[name="shopping-list-entry"]').val();

    //create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
    $('.shopping-list').append(`<li>
        <span class="shopping-item">${shopItemEntry}</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>`);

 //listen for when the user clicks check.  Add strikethrough to text for the item who's button is checked.
    $('.ul').on('click', '.shopping-item', 'shopping-item-controls', '.shopping-item-toggle', function(event) {
      $(this).closest('li.span').toggleClass('shopping-item__checked');
    });

    //listen for when the user clicks delete.  Make the delete remove the item
    $('.shopping-item-delete').click(function(event) {
      this.closest('li').remove(); //remove the shopping item entry
    });


  });
});
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item-checked {
  text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shopping List</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="main.css">
</head>

<body>

  <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">

      <li>
        <span class="shopping-item shopping-item__checked">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>

      <li>
        <span class="shopping-item">oranges</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">milk</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">bread</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="index.js"></script>


</body>

</html>

1 Ответ

0 голосов
/ 16 марта 2020

Класс, который вы добавляли, не соответствует определению в css (.shopping-item__checked против .shopping-item-checked). Селекторы для события и элементов, которые будут обрабатываться при возникновении события, также были неправильными. Обработчики проверки и удаления были объявлены внутри обработчика отправки формы, что означало дубликаты, которые регистрировались при каждом добавлении элемента в список. Смотрите обновленный код ниже. 

$(function() {
  $(".shopping-list").empty(); //clear the list when the browser is loaded for the first time

  $("#js-shopping-list-form").submit(event => {
    //submission event

    event.preventDefault(); //prevent default submission behavior

    //grab the value written in the add an item input
    const shopItemEntry = $(event.currentTarget)
      .find('input[name="shopping-list-entry"]')
      .val();

    //create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
    $(".shopping-list").append(`<li>
        <span class="shopping-item">${shopItemEntry}</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>`);
  });

  //listen for when the user clicks check.  Add strikethrough to text for the item who's button is checked.
  $(".shopping-list").on("click", ".shopping-item-toggle", function(event) {
    $(this)
      .closest("li")
      .find(".shopping-item")
      .toggleClass("shopping-item__checked");
  });

  //listen for when the user clicks delete.  Make the delete remove the item
  $(".shopping-list").on("click", ".shopping-item-delete", function(event) {
    this.closest("li").remove(); //remove the shopping item entry
  });
});
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item__checked {
  text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shopping List</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="main.css">
</head>

<body>

  <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">

      <li>
        <span class="shopping-item shopping-item__checked">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>

      <li>
        <span class="shopping-item">oranges</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">milk</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">bread</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="index.js"></script>


</body>

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

Похожие темы

...