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

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

第一个输入可以正常工作，但第二个不能正常工作。我希望交换可以同时进行。

最佳答案

您正在覆盖两个值之一，然后再读取另一个值。因此，最终得到的值是相同值的两倍。

传统方法是使用临时变量：

$("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>

关于javascript - 如何在2个输入之间交换值(value)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48846337/