如果当前输入已更改，则显示另一个元素答案

【问题标题】：Show another element if current input was changed如果当前输入已更改，则显示另一个元素
【发布时间】：2017-11-15 14:16:34
【问题描述】：

如果当前输入发生更改，我想显示一个元素。

$('.type_number').change(function() {
  $(this)
  $('.check-update').css('display', 'block')
})

<input class="type_number" type="number" name="amount" value="{{ product.amount }}">
<input type="hidden" name="product" value="{{ product.product.id }}">
<button type="submit" class="btn btn-link check-update">
  <i class="fa fa-check"></i>
</button>

如果当前已更改，如何说 jquery 显示另一个元素

这给我带来了困难，而且我不知道该怎么做。如果有人知道，请解释一下

【问题讨论】：

你也可以添加你的html吗？
并将其设为 sn-p 或 fiddle
$('.check-update').show()
$(this) 是干什么用的？删除它。
不，只是为了理解

标签： javascript jquery django

【解决方案1】：

我猜这就是你想要的。纯属Javascript

var input = document.querySelector('#my-text-box');

var messages = document.querySelector('#messages');

input.addEventListener('input', function()
{
   messages.style.display = 'block'
});

<input id="my-text-box" /> 

<div id="messages" style="display: none">I was hidden First</div>

这只是一个演示，让您了解如何让您的东西正常工作

【讨论】：

【解决方案2】：

据我了解，您希望在有人开始输入时显示 div。在这种情况下，您应该使用keypress 事件。像这样：

$('.type_number').keypress(function() {
    $('.check-update').show();
    $('input').attr('type', 'text'); 
});

.check-update {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input class='type_number' type="text">
  <input type="hidden" name="product" value="{{ product.product.id }}">
  <div class='check-update'>Div when somebody starts typing</div>

编辑：OP 想要从输入中删除隐藏的类型。我已经调整了代码，这样每个隐藏的输入都会在用户开始输入时显示出来。

【讨论】：

我可以有两个和三个这样的元素，当当前输入发生变化时，我应该显示图标。如果我将使用此代码，它将适用于所有输入
您可以将相同的类添加到您想要隐藏的所有输入元素，并将该类的 css 设置为 display:none，这将适用于所有隐藏的输入。如果你想这样做，也可以从你的输入中删除隐藏的类型。
我不创建输入。它们生成为 django 模板。只有一个输入:)
我已经调整了代码。现在，当有人开始输入时，每个输入都会显示。那是你想要的吗？

【解决方案3】：

使用jQuery，如果输入元素的值不为空并且改变了“myname”以外的值，它会显示值为“bob”的标签。

html

<input id = "type_number" type = "text" value="myname"/>
<label id = "check-update" style="display:none;">bob</label>

jQuery

$("#type_number").on("change keyup paste", function() {
    if($("#type_number").val() !== "" && $("#type_number").val() !== "myname")
        $("#check-update").css("display", "block");
   else 
        $("#check-update").css("display", "none");
});

jsFiddle demo

【讨论】：

【解决方案4】：

也许你正在搜索这个：

$('.type_number').change(function () {
      
         if($(this).val() < 1 ) {
          $('.check-update i').addClass('fa-remove');
          $('.check-update i').removeClass('fa-check');
         } else {
            $('.check-update i').addClass('fa-check');
             $('.check-update i').removeClass('fa-remove');
        }
     });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="type_number" type="number" name="amount" value="{{ product.amount }}">
        <input type="hidden" name="product" value="{{ product.product.id }}">
        <button type="submit" class="btn btn-link check-update"><i class="fa fa-remove"></i></button>

【讨论】：