jQuery切換輸入值和按鈕類

Question

我有一個PHP頁面，該頁面從MySQL數據庫加載具有預填充值的表單。 用戶可以編輯表單並使用所需的數據更新它，這是可行的。

如果不適用，我想為他們提供切換字段之一的功能。 這樣，該字段將填充文本“ N / A”，並且按鈕類應更改為“ btn-warning”。 再次單擊時，應刪除“ N / A”並重新插入之前的數據-這可能嗎？

到目前為止，我已經開始工作了……單擊按鈕時，輸入中會填充“ N / A”，並且類會更改，但是它不會切換，即不會重新顯示先前的數據，並且保留“ N / A”。

我創建了FIDDLE ，我們將為您提供幫助。

 $(document).ready(function() { $("#ipclear").click(function() { $("#ip").val('N/A'); $(this).toggleClass('btn-default').toggleClass('btn-warning'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> <div class="input-group"> <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4"> <div class="input-group-btn"> <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button> </div> </div> 

Answer 1

在切換之前，將文本存儲在變量中，並在下次單擊時再次進行設置。

這是一個工作示例：

 $(document).ready(function() { var toggleText = $("#ip").val(); $("#ipclear").click(function() { if ($("#ip").val() != 'N/A') { toggleText = $("#ip").val(); $("#ip").val('N/A'); } else $("#ip").val(toggleText); $(this).toggleClass('btn-default').toggleClass('btn-warning'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> <div class="input-group"> <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4"> <div class="input-group-btn"> <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button> </div> </div> 

Answer 2

您沒有在代碼中還原輸入字段的值。 您需要在某個地方記住舊值並在第二次單擊時將其恢復。

我使用可能的解決方案更新了您的JSFIDDLE： https ://jsfiddle.net/Doogie/6pqugkg3/5/

更多提示：

如果您有多個字段，那么您需要記住每個字段的原始值。 您可以通過輸入元素上的data-attribute來做到這一點：

<input value="currentValue" data-orig="originalValueFromDB" id="ip" ....>

您可以像其他任何屬性一樣，使用JQuery獲得原始值：

var origValue = $('#ip').attr('data-orig'); // origValue = "originalValueFromDB'

Answer 3

您需要在變量中分配文本值，然后在切換后重新分配。

 $(document).ready(function() { window.ipVal = $("#ip").val(); $("#ipclear").click(function() { $(this).toggleClass('btn-default btn-warning'); if($(this).hasClass('btn-default')){ //OR $(this).hasClass('btn-default') $("#ip").val(window.ipVal); }else{ $("#ip").val('N/A'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> <div class="input-group"> <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4"> <div class="input-group-btn"> <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button> </div> </div>