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

Question

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

Answer 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>

脚本相当self-explanatory。如果需要进一步解释，请评论。

fiddle: https://jsfiddle.net/qkLfftoo/7/

注意：此脚本是为了提供更好的用户体验而不是为了验证。请使用 back-end 验证以确保输入不是负整数。

对于多个按钮：

<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');
});

fiddle: https://jsfiddle.net/qkLfftoo/27/

Answer 2

由于它是 front-end 开发部分，您可以使用 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/

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

Make button visible if text changes

html

javascript

php

jquery

shopify