如果文本更改，使按钮可见答案

【问题标题】：Make button visible if text changes如果文本更改，使按钮可见
【发布时间】：2018-03-11 03:46:28
【问题描述】：

我试图让按钮仅在购物车上的商品数量发生变化时才可见（就像在 ebay 购物车上一样）。我做到了，但它没有按预期工作link，有人知道更简单或不同的方法吗？？

【问题讨论】：

w3schools.com/code/tryit.asp?filename=FP9Q97RYC3OF
你想做什么？按钮是如何“按预期”工作的

【解决方案1】：

试试这个（jquery）：

<input type="number" name="quantity" min="0" max="99">
<button id="add" style="display: none;">Add Item</button>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
$('input[name="quantity"]').on('change keyup', function(){
    var qty = $(this).val();
  if ($.isNumeric(qty) && qty > 0) {
        $('#add').show();
    } else {
        $('#add').hide();
    }
});
</script>

脚本是不言自明的。如果您需要进一步解释，请发表评论。

小提琴：https://jsfiddle.net/qkLfftoo/7/

注意：此脚本旨在提供更好的用户体验，并非用于验证。请使用后端验证以确保条目不是负整数。

对于多个按钮：

<div class="item">
  <input type="number" name="quantity" min="0" max="99">
  <button class="add" data-id="1" style="display: none;">Add Item</button>
</div>
<div class="item">
  <input type="number" name="quantity" min="0" max="99">
  <button class="add" data-id="2" style="display: none;">Add Item</button>
</div>
<div class="item">
  <input type="number" name="quantity" min="0" max="99">
  <button class="add" data-id="3" style="display: none;">Add Item</button>
</div>
$('input[name="quantity"]').on('change keyup', function(){
    var item = $(this).closest('.item');
    var qty = $(this).val();
  if ($.isNumeric(qty) && qty > 0) {
        item.find('.add').show();
    } else {
        item.find('.add').hide();
    }
});

$('.add').on('click', function(){
    var product_id = $(this).data('id');
  var item = $(this).closest('.item');
  var qty = item.find('input[name="quantity"]').val();
  alert('product_id: ' + product_id + ' * ' + qty + ' will be added');
});

小提琴：https://jsfiddle.net/qkLfftoo/27/

【讨论】：

嗨迈克尔，感谢您的回答。它工作完美，但我有一个问题；按钮仅出现在第一个 line.item 产品上。我期待它会出现在每个产品上。你可以在我的网站购物车上试试。 electrocrea.com
EDIT 我使用项目 ID #add{{item.id}} 解决了问题

【解决方案2】：

由于是前端开发部分，所以可以使用jQuery。使用 jQuery 禁用按钮有很多优点，因为它允许您根据用户交互启用和禁用按钮。您将能够轻松地将此代码与其他 jQuery 实现一起使用。

您可以查看以下教程以获取更多参考。

https://blog.revillweb.com/jquery-disable-button-disabling-and-enabling-buttons-with-jquery-5e3ffe669ece

https://www.formget.com/enable-disable-button-jquery/

【讨论】：