Возникли проблемы при переключении одного элемента за раз (jQuery) - PullRequest
Новая
       2

Возникли проблемы при переключении одного элемента за раз (jQuery)

2 голосов
/ 30 октября 2019

Создание продуктового приложения для школы, и у меня возникают проблемы при выборе одного элемента, который нужно вычеркнуть. У меня есть код, написанный до сих пор, и он вроде работает, но когда вы нажимаете кнопку «проверить», он пересекает все элементы на странице с одинаковым классом, а не только отдельный элемент, кнопка «проверить»ниже и связано с. Как настроить таргетинг только на один продуктовый продукт за один раз с помощью кнопки «щелкнуть»? Что-то в моем jQuery не так. 

function checkItem() {
  $('.shopping-item-toggle').on('click', event => {

    const targetItem = $('.shopping-item');

    const otherItems = $('.shopping-item-toggle').not(targetItem);


    otherItems.removeClass('shopping-item__checked');

    targetItem.toggleClass('shopping-item__checked');
  });  
}

$(checkItem);
* {
  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;
}
<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">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 shopping-item__checked">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.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script src="index.js"></script>

Изображение щелчка одного флажка, но оно все пересекает

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Вы должны использовать event.target, чтобы получить элемент, по которому щелкнули, затем closest для поиска родительского элемента li и children, чтобы найти элемент, которым вы хотите манипулировать 

$(event.target).closest('li').children('.shopping-item');


function checkItem() {
  $('.shopping-item-toggle').on('click', event => {

    const targetItem = $(event.target).closest('li').children('.shopping-item');

    const otherItems = $('.shopping-item-toggle').not(targetItem);

    otherItems.removeClass('shopping-item__checked');

    targetItem.toggleClass('shopping-item__checked');
  });  
}

$(checkItem);
* {
  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;
}
<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">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 shopping-item__checked">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.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script src="index.js"></script>
1 голос
/ 30 октября 2019

Получите текущий товар, используя комбинацию closest и prev, теперь вы выбираете все товары для покупок 

function checkItem() {
    $('.shopping-item-toggle').on('click', event => {
      const targetItem = $(event.target).closest('.shopping-item-controls').prev('.shopping-item');
      const otherItems = $('.shopping-item').not(targetItem);
      otherItems.removeClass('shopping-item__checked');
      targetItem.toggleClass('shopping-item__checked');
    });  
  }


function checkItem() {
  $('.shopping-item-toggle').on('click', event => {
    const targetItem = $(event.target).closest('.shopping-item-controls').prev('.shopping-item');
    const otherItems = $('.shopping-item').not(targetItem);
    otherItems.removeClass('shopping-item__checked');
    targetItem.toggleClass('shopping-item__checked');
  });
}
$(function() {
checkItem();
})
* {
  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">
</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">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 shopping-item__checked">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.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>


</body>

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

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

...