javascript - 如何在 2 个输入之间交换值(value)

Question

我有 2 个输入文本和按钮。我想同时在 2 个输入之间进行交换值。这是我的代码。

$("button").on('click', function() {
    if (!($(this).hasClass("clicked"))) {
        $(this).addClass("clicked");
        $(".first").val($(".second").val());
        $(".second").val($(".first").val());
    } else {
        $(this).removeClass("clicked");
        $(".first").val($(".second").val());
        $(".second").val($(".first").val());
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="first" type="text" value>
  <input class="second" type="text" value>
  <button type="button">Exchange</button>
</div>

第一个输入工作正常但第二个输入不工作..我希望交换同时发生。

Answer 1

在读取另一个值之前，您正在覆盖两者之一。所以你最终得到了两倍的相同值。

传统的方式是使用临时变量:

$("button").on('click', function() {
    $(this).toggleClass("clicked");
    var temp = $(".first").val();
    $(".first").val($(".second").val());
    $(".second").val(temp);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="first" type="text" value>
  <input class="second" type="text" value>
  <button type="button">Exchange</button>
</div>

同时请注意如何使用 toggleClass 方法缩短代码。

备选

只是为了提供一个替代方案，您可以在没有显式额外变量的情况下使用 ES6 destructuring assignment 执行此操作.为此，您需要为 input 值分配一个可分配的属性。当然，DOM value 属性就是:

$("button").on('click', function() {
    $(this).toggleClass("clicked");
    [$(".first").get(0).value, $(".second").get(0).value] = 
            [$(".second").val(), $(".first").val()];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="first" type="text" value>
  <input class="second" type="text" value>
  <button type="button">Exchange</button>
</div>