Question

我一直在努力让下面的代码工作。基本上我想要它做的是在单击链接时在输入框之间交换文本。所以从A到B和B到A的文字。关于我如何解决这个问题或者我做错了什么的想法？我试过以下内容：

 <script>
 $("#switchdir").click(function () 
            {
    $("#saddr").val($('#daddr').val());
    $("#daddr").val($('#saddr').val());
            }

 </script>


<form action="directions1.php" method="get">
  <h1><p>A: <input type="text"  class="directionsdata"  name="saddr"       placeholder="Enter Address, business or landmark" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Address, business or landmark'" style="color: CCCCCC; width:290px; height: 20px; padding:5px; border-radius: 5px;  border-style: solid; border-color: #CCCCCC;" /></p></h1> 
  <h1><p>B: <input type="text" class="directionsdata" name="daddr"  placeholder="Enter Address, business or landmark" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Address, business or landmark'" style="width:290px; height: 20px;padding:5px; border-radius: 5px;  border-style: solid; border-color: #CCCCCC;"/></p></h1> 
  <a href="#" id="switchdir">Switch</a>
  <input type="submit" value="Get Directions" class="button"/>
  </form>

Answer 1

在将值分配给第一个输入字段之前，您需要将值存储在变量中，否则一旦分配了值，您将松开它。你的id选择器也是错误的，因为输入元素没有id属性，而是使用name属性和属性选择器

jQuery(function () {
    $("#switchdir").click(function (e) {
        var daddr = $('input[name="daddr"]').val();
        $('input[name="daddr"]').val($('input[name="saddr"]').val());
        $('input[name="saddr"]').val(daddr);
    })
})

演示：Fiddle

Answer 2

您需要一个临时变量。此外，你有一个失踪的关闭）...或者这可能只是一个复制/粘贴错误。无论哪种方式，我修复它。

试试这个：

$("#switchdir").click(function () {
    var saddr=$("#saddr").val();
    $("#saddr").val($('#daddr').val());
    $("#daddr").val(saddr);
});

Answer 3

这是一个示例，但您需要先保存一个您将开始交换的值。

http://jsfiddle.net/mXna3/

HTML：

<input id="alpha" type="text"><br/>
<input id="beta" type="text">

<div id="swapper">Click me to swap input texts</div>

JS：

$('#swapper').on('click', function() {
    var alpha = $('#alpha'),
        beta = $('#beta'),
        temp = null;
    // Cache the first input's value
    temp = alpha.val();
    // Place 2nd inputs value in first
    alpha.val(beta.val());
    // Place first input value in second's
    beta.val(temp);
});

Answer 4

上面的答案是正确的，我的补充包括你也给输入元素的id属性赋值。它使您的js代码更清晰，并且使用jquery更容易访问。

<input type="text"  id="a_input" class="directionsdata"  name="saddr" ....

和

<input type="text" id="b_input" class="directionsdata" name="daddr" ....

下面的JavaScript代码

$("#switchdir").click(function () {
    var a_val = $("#a_input").val();
    var b_val = $("#b_input").val();
    $("#a_input").val(b_val);
    $("#b_input").val(a_val);
});

演示：Fiddle

Jquery .click切换文本输入框

4 个答案: