如何在按钮单击时切换输入值

Question

我有一个和一个领域。当我单击该按钮时，我希望输入字段填充一些文本。再次单击该按钮时，我希望填充的文本消失或变为 .buttoninputNull

当我在线检查时，我只能找到从列表中的元素切换类的链接。

我如何通过 ？jQuery

这是我到目前为止的代码。我能够用所需的值填充输入字段。但是当我再次单击该按钮时，我无法删除该值。

<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">

    Click Me

</button>

<input type="text" name="test-input" id="test-input" value="">

<script type="text/javascript">

  $('#test-button').click(function()

    {

      $('#test-input').val("Value Populated");

    }

  )

</script>

Answer 1

喜欢这个？<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">&nbsp; &nbsp; Click Me</button><input type="text" name="test-input" id="test-input" value=""><script type="text/javascript">&nbsp; $('#test-button').click(function()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; const $testInput = $('#test-input');&nbsp; &nbsp; &nbsp; if (!$('#test-input').val().length) {&nbsp; &nbsp; &nbsp; &nbsp; $('#test-input').val("Value Populated");&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $('#test-input').val("");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; )</script>

Answer 2

您可以检查该值是否存在，如果该值存在，则将其删除。像这样试试吧&nbsp; $('#test-button').click(function()&nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; if($('#test-input').val() != "Value Populated"){&nbsp; &nbsp; &nbsp;$('#test-input').val("Value Populated");&nbsp; &nbsp; }else{&nbsp; &nbsp; $('#test-input').val("");&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; )<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">&nbsp; &nbsp; Click Me</button><input type="text" name="test-input" id="test-input" value="">另一个选项是在设置值时为输入设置数据属性。这将帮助您重置，即使输入已更改&nbsp;$('#test-button').click(function()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; let valueSet =&nbsp; $('#test-input').attr('data-set');&nbsp; &nbsp; &nbsp; if(valueSet&nbsp; ==1){&nbsp; &nbsp; &nbsp; &nbsp; $('#test-input').attr('data-set','0').val("");&nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; $('#test-input').attr('data-set','1').val("Value Populated");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; )<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">&nbsp; &nbsp; Click Me</button><input type="text" name="test-input" id="test-input" value="">

Answer 3

您可以检查输入中是否有值“测试输入”，如果没有添加文本，否则删除文本 -<script type="text/javascript">&nbsp;$('#test-button').click(function()&nbsp; {&nbsp; &nbsp; &nbsp;if ($('#test-input').val == '' || $('#test-input').val == null) {&nbsp; &nbsp; &nbsp; &nbsp;$('#test-input').val("Value Populated");&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp;$('#test-input').val("");&nbsp; &nbsp; &nbsp;}&nbsp; })</script>enter code here

Answer 4

只需检查您是否有价值：$(document).ready(function() {&nbsp; $('#test-button').on('click',function() {&nbsp; &nbsp; if ($('#test-input').val()) {&nbsp; &nbsp; &nbsp; $('#test-input').val("")&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $('#test-input').val("Value Populated")&nbsp; &nbsp; }&nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">&nbsp; &nbsp; Click Me</button><input type="text" name="test-input" id="test-input" value="">