时间戳

首页 > 解决方案 > 按类检查元素的值，如果元素存在则编辑值，否则添加新的html

javascript - 按类检查元素的值，如果元素存在则编辑值，否则添加新的html

问题描述

我正在向 DOM 动态添加一些元素，并且我想在添加新元素之前检查和编辑 itemid 的值是否存在，方法是将 itemid 的值与 id 进行比较，如果该值等于我想要编辑的 id元素的值通过在前一个值上加 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>');  

}

  });

标签： javascriptjquery

解决方案

我的 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>

推荐阅读