2

Имеем блоки с данными на входе с разными id в блоке "prod_id":

<div class="clicker">
    <div class="card">
        <div class="card-body">
            <div class="media">
                <div class="media-body">
                    <div class="prod_id" id="prod_id">1</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="clicker">
    <div class="card">
        <div class="card-body">
            <div class="media">
                <div class="media-body">
                    <div class="prod_id" id="prod_id">2</div>
                </div>
            </div>
        </div>
    </div>
</div>

При нажатии на блок "clicker" в отдельном поле создается новый блок с таким же id в блоке "prod_id" и количеством 1.

<script type="text/javascript">
       window.onload = function() {

        function addProd() {
            var prodID = this.querySelector('#prod_id');

            $('.tt').append(
                '<div class="col-xl-14">'+
                    '<div class="card card-body alert-yellow border-yellow">'+
                        '<div class="media">'+
                            '<div class="media-body">'+
                                '<div class="prodID" style="display:none;">' + prodID.innerHTML + '</div>'+
                                '<div class="col-xl-12 input-group bootstrap-touchspin bootstrap-touchspin-injected">'+
                                '<input type="text" id="quantity" value="1" class="form-control touchspin-step alert-yellow">'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>'
                );
            }

        var comments = document.getElementsByClassName('clicker');

        for( var i=0; i<comments.length; ++i ) {
            var obj = comments[i];
            obj.onclick = addProd;
        }

  }
</script>

<div class="tt">
    <div class="col-xl-14">
        <div class="card card-body alert-yellow border-yellow">
            <div class="media">
                <div class="media-body">
                    <div class="prodID" style="display:none;">1</div>
                    <div class="col-xl-12 input-group bootstrap-touchspin bootstrap-touchspin-injected">
                    <input type="text" id="quantity" value="1" class="form-control touchspin-step alert-yellow">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-14">
        <div class="card card-body alert-yellow border-yellow">
            <div class="media">
                <div class="media-body">
                    <div class="prodID" style="display:none;">2</div>
                    <div class="col-xl-12 input-group bootstrap-touchspin bootstrap-touchspin-injected">
                    <input type="text" id="quantity" value="1" class="form-control touchspin-step alert-yellow">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Задача проверить при нажатии существует ли новый блок с таким же id, если да, то изменить количество +1 в input "quantity" нового блока.

введите сюда описание изображения

11
  • "Имеем блоки с данными на входе с разными id:" --- неа. id тут явно одинаковые 12 июл 2021 в 20:59
  • Алексей Шиманский извините, поправил...
    – 4isto
    12 июл 2021 в 21:05
  • 3
    "в отдельном поле создается новый блок" - где?
    – user176262
    12 июл 2021 в 21:47
  • Где код, который "создает новый блок"? Мы должны его сами придумать/написать?
    – user176262
    13 июл 2021 в 13:46
  • 2
    Задача проверить при нажатии существует ли новый блок с таким же id, если да, то изменить количество +1 в input "quantity" нового блока. .... не правильно к задаче подошел(да и подошел ли вообше (очень надеюсь это копи паст из среднивековия (если сам написал снимаю шляпу это нечто))) , надо при каждом добавлении сохранить добавленный id в массив , а при следуйшем уже сравнит текущий id с массивом id-шников вот и решение осталось реализовать :)
    – Armen
    15 июл 2021 в 17:33

2 ответа 2

3
+50

Зачем такие сложности? Можно проще сделать.

const $tt = document.querySelector(`.tt`);

addEventListener(`click`, e => {
  const $target = e.target.closest(`[data-id]`);
  if (!$target) return;
  const $id = document.getElementById(`id-${$target.dataset.id}`);
  if ($id) $id.querySelector(`input`).value = $id.dataset.count = +$id.dataset.count + 1;
  else $tt.insertAdjacentHTML(`beforeend`, `<div class="count" id="id-${$target.dataset.id}" data-count="1"><input type="text" value="1"></div>`);
})
.clickers-parent {
  display: flex;
  width: 100px;
}

.clicker,
.count {
  width: 50%;
  margin: 0 10px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  text-align: center;
  padding: 5px 36px;
  background: #e2e2e2;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}

.clicker:hover {
  background: #d6d6d6;
}
<div class="clickers-parent">
  <div class="clicker" data-action="add-info" data-id="1">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="1">push me</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clicker" data-action="add-info" data-id="2">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="2">and me</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tt">
</div>

4
  • мне понравилось ваше решение. Единственный момент, который что-то в голове не укладывается, что addEventListener - это вроде метод, который по идее так пишется: elem.addEventListener, а у вас он как функция записан, и это как-то работает (это устаревшая запись что ли? Я просто в руководствах такого вроде не видел.) 20 июл 2021 в 6:26
  • @freestyle_HD, в данном случае это эквивалентно window.addEventListener
    – Grundy
    20 июл 2021 в 7:26
  • а сам input куда делся? ))
    – 4isto
    20 июл 2021 в 19:42
  • Поправил ответ. Неужели так сложно querySelector дописать?
    – nazarpunk
    20 июл 2021 в 21:57
1

@Armen написал в комментариях, как это можно реализовать. Я использовал его идею. html-код из вопроса местами был изменен (чтобы на странице не было разных элементов с одинаковыми id, ну и добавил div-обертку с классом clickers-parent), js-код полностью был переписан. Буду рад советам по изменению кода в тех местах, где есть косяки или можно сделать лучше.

let arr = [];
/*этот массив будет хранить idишники кнопок на которые пользователь уже нажал*/
let comments = document.querySelector('.clickers-parent');
let tt = document.querySelector('.tt');

comments.onclick = function(event) {
  /* Используя подход: "Делегирование событий", ловлю клик не по элементам с классами clicker, но по их родительскому элементу с классом: clickers-parent.  */
  event.preventDefault(); //на всякий случай отменяю стандартное поведение элемента при клике

  let clicker_prod_id = +event.target.closest('[data-action="add-info"]').querySelector('.prod_id').id;
  /* нужно  получить id кнопки, на которую пользователь нажал, получаю его и преобразую в тип: number*/

  if (arr.includes(clicker_prod_id)) {
    /*если такой id уже был добавлен в массив arr раньше, значит уже создан элемент содержащий в себе input с атрибутом data-bind-prod-id равным clicker_prod_id*/

    let input_node_list = tt.querySelectorAll('input[data-bind-prod-id]');
    /*если бы я знал, как обратиться к элементу input[data-bind-prod-id="clicker_prod_id"], то обратился бы к нему напрямую, но не знаю поэтому получаю nodelist*/

    for (let elem of input_node_list) {
      /*nodelist, содержащий интересующий меня элемент, есть. Теперь пройдусь по нему циклом и найду-таки этот элемент: input[data-bind-prod-id="clicker_prod_id"]*/
      let elem_attr = +elem.getAttribute('data-bind-prod-id');
      if (elem_attr === clicker_prod_id) { //нашел
        elem.setAttribute('value', +elem.getAttribute('value') + 1);
        /* а теперь увеличу value на 1 */

        break; //т.к нужный элемент найден, выхожу из цикла, чтобы не делать ненужные итерации
      }
    }

  } else {
    //такой id не был добавлен в массив, значит элемента, содержащего в себе input с атрибутом data-bind-prod-id равным clicker_prod_id не существует и его нужно создать
    let div = document.createElement('div');
    div.className = "col-xl-14";

    div.insertAdjacentHTML("afterbegin", `<div class="card card-body alert-yellow border-yellow"><div class="media"><div class="media-body"><div class="prodID" style="display:none;">${clicker_prod_id}</div><div class="col-xl-12 input-group bootstrap-touchspin bootstrap-touchspin-injected"><input type="text" data-obj="quantity" data-bind-prod-id="${clicker_prod_id}" value="1" class="form-control touchspin-step alert-yellow"></div></div></div></div>`);
    /* Есть все основания полагать, что существует более разумный способ внедрения такой портянки на страницу, но смог пока только так */

    tt.append(div); //элемент существует, но на страницу пока не добавлен, добавляю его

    arr.push(clicker_prod_id);
    /*добавляю idишник нажатой кнопки в массив arr, чтобы при дальнейших нажатиях на кнопку обращаться к массиву arr и проверять, нажималась ли уже эта кнопка или нет*/

  }

};
.clickers-parent {
  display: flex;
  width: 100px;
}

.clicker {
  width: 50%;
  margin: 0 10px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  text-align: center;
  padding: 5px 36px;
  background: #e2e2e2;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}

.clicker:hover {
  background: #d6d6d6;
}
<div class="clickers-parent">
  <div class="clicker" data-action="add-info">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="1">push me</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clicker" data-action="add-info">
    <div class="card">
      <div class="card-body">
        <div class="media">
          <div class="media-body">
            <div class="prod_id" id="2">and me</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tt">
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.