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/

更多提示：

如果您有多个字段，则需要记住每个字段的原始值。你可以做的一种方法是通过输入元素上的数据属性：

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

Jquery切换输入值和按钮类

3 个答案: