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

Я добавляю некоторые элементы в DOM динамически, и я хочу проверить и отредактировать значение itemid, если оно существует, прежде чем добавлять новые элементы, сравнивая значение itemid с идентификатором, если значение равно идентификатору, который я хочу изменить значение элемента, добавив 1 к предыдущему значению, если значение не равно, я хочу добавить новый набор элементов. У меня есть код ниже, но я не могу заставить его работать по назначению.

    $("#topitems").on("click", ".topitems", function(e) {
    e.preventDefault();

    var     values = JSON.parse(localStorage.getItem("source"));
            var itemid = values[i].value;


if (document.getElementsByClassName("itemid").length) {
$('.itemid').each(function() {
  var enteredValue = $(this).val();
if (enteredValue) {
  if (parseInt(enteredValue) == itemid) {
  var oldQty = $(this).parent().parent().find("input[name=quantity]").val()
  $(this).parent().parent().find("input[name=quantity]").val(parseInt(oldQty)+1)

}

}
else {
  $('#cart_contents').prepend('
<tr>
    <td>
        <a href = "'+line+'">
            <span class = "glyphicon glyphicon-trash"></span>
        </a>
    </td>
    <td style = "align: left !important;">'+label+'&nbsp;&nbsp;(stock:'+inventory+')  </td>
    <td>
        <select name = "unit_type" id = "unit_type" style = "'+isdisplay+'" class = "show-menu-arrow" data-style = "btn-default btn-sm" data-width = "auto">
            <option value = "Kg">Kg</option>
            <option value = "Gr">Gr</option>
        </select>
    </td>
    <td>
        <input type = "number"  name = "quantity"  id = "quantity"  value = "1" class = "quantity form-control input-sm" tabindex = "2" autocomplete = "off">
        </td>
        <td>
            <input  type = "hidden" class = "line" name = "line"  value = "'+line+'">
                <input  type = "hidden" name = "itemid" class = "itemid"  value = "'+value+'">
                    <input  type = "hidden" name = "costpricemarker" id = "costpricemarker" value = "'+cost_price+'">
                        <input  type = "hidden" name = "costprice" id = "costprice" value = "'+cost_price+'">
                            <input type = "hidden" name = "hprice" id = "hprice" value = "'+price+'">
                                <input type = "number" name = "price" id = "price" value = "'+price+'" class = "form-control input-sm" tabindex = "3">
                                    <input  type = "hidden"  name = "tax" id = "tax" value = "'+tax+'" class = "form-control input-sm" tabindex = "2">
                                    </td>
                                    <td>
                                        <input type = "hidden" name = "discounttype" id = "discounttype" value = "'+discount+'">
                                            <input type = "number" name = "discount" id = "discount" value = "0"  class = "form-control input-sm" tabindex = "4">
                                            </td>
                                            <td>
                                                <span id = "currlbltotal">
                                                    <? echo $this->config->item('currency_symbol');?>
                                                </span>
                                                <span id = "total">'+price+'</span>
                                            </td>
                                        </tr>');  

}

});
}
 else {

  $('#cart_contents').prepend('
                                        <tr>
                                            <td>
                                                <a href = "'+line+'">
                                                    <span class = "glyphicon glyphicon-trash"></span>
                                                </a>
                                            </td>
                                            <td style = "align: left !important;">'+label+'&nbsp;&nbsp;(stock:'+inventory+')  </td>
                                            <td>
                                                <select name = "unit_type" id = "unit_type" style = "'+isdisplay+'" class = "show-menu-arrow" data-style = "btn-default btn-sm" data-width = "auto">
                                                    <option value = "Kg">Kg</option>
                                                    <option value = "Gr">Gr</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type = "number"  name = "quantity"  id = "quantity"  value = "1" class = "quantity form-control input-sm" tabindex = "2" autocomplete = "off">
                                                </td>
                                                <td>
                                                    <input  type = "hidden" class = "line" name = "line"  value = "'+line+'">
                                                        <input  type = "hidden" name = "itemid" class = "itemid"  value = "'+value+'">
                                                            <input  type = "hidden" name = "costpricemarker" id = "costpricemarker" value = "'+cost_price+'">
                                                                <input  type = "hidden" name = "costprice" id = "costprice" value = "'+cost_price+'">
                                                                    <input type = "hidden" name = "hprice" id = "hprice" value = "'+price+'">
                                                                        <input type = "number" name = "price" id = "price" value = "'+price+'" class = "form-control input-sm" tabindex = "3">
                                                                            <input  type = "hidden"  name = "tax" id = "tax" value = "'+tax+'" class = "form-control input-sm" tabindex = "2">
                                                                            </td>
                                                                            <td>
                                                                                <input type = "hidden" name = "discounttype" id = "discounttype" value = "'+discount+'">
                                                                                    <input type = "number" name = "discount" id = "discount" value = "0"  class = "form-control input-sm" tabindex = "4">
                                                                                    </td>
                                                                                    <td>
                                                                                        <span id = "currlbltotal">
                                                                                            <? echo $this->config->item('currency_symbol');?>
                                                                                        </span>
                                                                                        <span id = "total">'+price+'</span>
                                                                                    </td>
                                                                                </tr>');  

}

  });

Почему вы используете getElementsByClassName, когда вы уже загружаете jQuery на страницу?

— 10.12.2020 22:32

как лучше решить проблему?

— 10.12.2020 22:35

Это не проблема. Это запах кода. Что-то "не так выглядит". Все, что вы делаете как программист, должно быть сделано по какой-то причине. Когда программист читает подобную логику и видит, что вы делаете что-то двумя разными способами, он сразу же отвечает: «Почему?». Чтобы сделать что-то подобное, у вас должна быть причина, в противном случае поддержание согласованности означает меньше вопросов.

— 10.12.2020 22:37

Что касается вашей проблемы, было бы полезно, если бы вы могли показать нам пример разметки, с которой вы работаете. И определите, откуда берется itemid.

— 10.12.2020 22:39

Чтобы показать полный код, getElementsByClassName существует, потому что я начал с этого простого javascript, а затем добавил jquery, поэтому я устраню несоответствие, когда код будет окончательным.

— 10.12.2020 22:46

В var itemid = values[i].value; я установлен? Определенно ли itemid имеет значение?

— 10.12.2020 23:04

да, это имело бы значение

— 10.12.2020 23:04

javascript jquery

10.12.2020 22:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

155

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мой jQuery довольно ржавый, и я не уверен, что не потерял некоторые важные детали того, что вы пытаетесь сделать, но, надеюсь, это будет полезно:

const cart_row_string = (item_id) =>
  '<tr>' +
    '<td><input type = "number" name = "quantity" value = "1" /></td>' +
    '<td><input type = "hidden" name = "itemid" class = "itemid" value = "' + item_id + '">' + item_id + '</td>' +
  '</tr>';

const add_item = (item_id) => {
  if (item_id) {
    const $table_body = $('#cart_table_body');
    const $item = $table_body.find('.itemid[value = "' + item_id + '"]');

    if ($item.length === 0) {
      $table_body.prepend(cart_row_string(item_id));
    } else {
      const $item_row = $item.closest('tr');
      const $quantity = $item_row.find('input[name = "quantity"]');
      $quantity.val(parseInt($quantity.val()) + 1);
    }
  }
};

$('#add_button').click(() => add_item(parseInt($('#id').val())));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "id" name = "id" type = "number" />
<button id = "add_button">Add</button>
<table id = "cart_table">
  <thead><tr><th>Quantity</th><th>Item ID</th></tr></thead>
  <tbody id = "cart_table_body"></tbody>
</table>

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

— 10.12.2020 23:59

10.12.2020 23:37