时间戳

首页 > 解决方案 > 单击其他元素后仅更改一个元素

javascript - 单击其他元素后仅更改一个元素

问题描述

我有以下问题：

我想更改输入字段的值，该输入字段位于另一个元素旁边，将被单击。

HTML：

<div>
   <a id="{$sArticle.articleID}" class="minus"><i class="icon-minus-wide"></i></a>
   
   <input class="quantityNum--input quantity{$sArticle.articleID}" name="sQuantity" 
   type="text" value="{$sArticle.minpurchase}">

   <a id="{$sArticle.articleID}" class="plus"><i class="icon-plus-wide"></i></a>
</div>

JS：

     $(document).on('click', ".plus", function (event) {
        let currentTarget = event.currentTarget;

        let idOfClickedElement = $(currentTarget).attr('id');

        let currentQuantity = Number($('.quantity' + idOfClickedElement).val());

        $(this).parent().find(".quantity" + idOfClickedElement).val(currentQuantity + 1)
    });

还有其他输入字段与示例中的相同。这些值也发生了变化，但我只想要一个。

标签： javascripthtmljquery

解决方案

由于带有 +/- 的每个输入都在 div 包装器内，因此您可以使用

$(this).closest("div").find(".quantityNum--input")

获取相关输入。

使用相对 DOM 遍历时不需要数字 ID。

将 + 和 - 组合成一个事件给出：

$(document).on('click', ".minus,.plus", function() {
  var delta = $(this).is(".plus") ? 1 : -1;
  $(this).closest("div").find(".quantityNum--input").val((i, val) => {
    console.log(val);
    return (val * 1) + delta;
  });
});
.minus,
.plus {
  cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="minus">[-]<i class="icon-minus-wide"></i></a>
  <input class="quantityNum--input" name="sQuantity" type="text" value="100">
  <a class="plus">[+]<i class="icon-plus-wide"></i></a>
</div>
<div>
  <a class="minus">[-]<i class="icon-minus-wide"></i></a>
  <input class="quantityNum--input" name="sQuantity" type="text" value="500">
  <a class="plus">[+]<i class="icon-plus-wide"></i></a>
</div>

推荐阅读