使用 '.on' 更改获取值 - JavaScript

在 JavaScript 中，我们有时需要更改某个元素的值，在这种情况下，我们可以使用 .on() 方法来绑定一个事件处理程序，然后在该处理程序中更改元素的值。

绑定事件处理程序

首先，我们需要使用 .on() 方法来绑定一个事件处理程序。例如，以下代码会在按钮点击时触发一个事件处理程序，并将该按钮的值更改为 “Clicked!”。

$('button').on('click', function() {
  $(this).val('Clicked!');
});

在上面的代码中，我们选择了所有的 button 元素，并将一个点击事件处理程序绑定到它们上面。当其中任何一个按钮被点击时，事件处理程序就会被触发。在事件处理程序中，我们使用 $(this) 来引用被点击的按钮，并将它的值更改为 “Clicked!”。

获取元素的当前值

如果我们要在更改元素的值之前获取它的当前值，可以使用 .val() 方法。例如，以下代码将获取一个输入框的当前文本值，并将其存储在一个变量中。

var currentValue = $('input').val();

在上面的代码中，我们选择了一个 input 元素，并使用 .val() 方法来获取它的当前文本值。我们将其存储在一个名为 currentValue 的变量中，以在稍后使用它。

更改元素的值

现在我们已经绑定了一个事件处理程序并获取了元素的当前值，我们可以更改元素的值。例如，以下代码将更改一个段落的文本值为 “Hello, World!”。

$('p').html('Hello, World!');

在上面的代码中，我们选择了一个 p 元素，并使用 .html() 方法将其文本值更改为 “Hello, World!”。

完整示例

以下是一个完整的示例，演示了如何使用 .on() 方法来更改元素的值。

// 绑定点击事件处理程序
$('button').on('click', function() {
  
  // 获取输入框的当前值
  var currentValue = $('input').val();
  
  // 在段落中显示当前值
  $('p').html(currentValue);
  
  // 更改按钮的值
  $(this).val('Clicked!');
  
});

在上面的代码中，我们绑定了一个点击事件处理程序，并在其中执行以下操作：

1. 获取输入框的当前值
2. 在段落中显示当前值
3. 更改按钮的值

当点击按钮时，文本框的值将显示在一个段落中，并将按钮的值更改为 “Clicked!”。