Javascript - 点击时交换输入元素答案

【问题标题】：Javascript - Swap input element on clickJavascript - 点击时交换输入元素
【发布时间】：2014-05-29 22:18:01
【问题描述】：

在 xe.com 上看到了他们在表单上交换货币的地方。我的网站也需要一些东西。基本上这不是问题，解决问题并在这里分享：

HTML

<form target="">
<input name="input1" id="firstinput" value="input #1">
<input name="input2" id="secondinput" value="input 2">
</form>
<a class="swap">Swap</a>

Javascript

$(document).ready(function () {
    $("a.swap").click(function(){
        var axix = document.getElementById("firstinput").value;
        var byiy = document.getElementById("secondinput").value;
        document.getElementById('secondinput').value = axix;
        document.getElementById('firstinput').value = byiy;
     });
});

演示：http://jsfiddle.net/Z5Vse/

有更好的方法吗？与我们分享。 :)

【问题讨论】：

您可以做的最好的事情是在使用 jQuery 时将 document.getElementById 替换为 $('#...')。
@AliBZ，你能详细说明一下吗？
@j08691，还有其他简单的方法吗？

标签： javascript jquery html input swap

【解决方案1】：

更短（不一定“更好”）：

$("a.swap").click(function () {
    $('#pickup').val([$('#destination').val(), $('#destination').val($('#pickup').val())][0])
});

jsFiddle example

IMO“更好”意味着干净、清晰和简洁。

$("a.swap").click(function () {
    var temp = $('#pickup').val();
    $('#pickup').val($('#destination').val())
    $('#destination').val(temp);
});

【讨论】：

【解决方案2】：

使用 JQUERY 并少用一个变量：

$(document).ready(function () {
    $("a.swap").click(function(){
        var axix = $("#pickup").val();        
        $('#pickup').val($("#destination").val());        
        $('#destination').val(axix);        
     });
});

【讨论】：