Jquery .click切换文本输入框

我一直试图让下面的代码工作。基本上我想要做的是在点击链接时交换输入框之间的文本。因此，从A到B和B到A的文本。关于如何解决这个问题或我在做什么错误的任何想法？
我已经试过以下：Jquery .click切换文本输入框

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

来源

2013-12-10 chriogenix

之前的值赋给你需要的值存储在一个变量，否则一旦你指定你将失去它的价值的第一个输入字段。此外，您的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

来源

2013-12-10 00:57:32

感谢您的快速回复。我现在明白为什么它不起作用。再次感谢！ – chriogenix

你需要一个临时变量。此外，你有一个遗漏封闭）...或者，这只是一个复制/粘贴错误。无论哪种方式我修好了。

试试这个：

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

来源

2013-12-10 00:57:54 Lenny

下面是一个例子，但你必须先救你就会开始与交换的一个值。

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); 
});

来源

2013-12-10 01:02:42 aztechy

感谢您的帮助。我很欣赏它，因为我是一名jQuery初学者。我现在知道最初设置一个变量来存储数据。 – chriogenix

欢迎您。而且，在基本层面上，这适用于所有的编程。当需要交换两个变量的值时，第三个变量用于存储第一个值，用第二个值覆盖第一个值，然后用第三个变量的值覆盖第二个值。 – aztechy

的答案是正确的，我的新增功能包括您对输入元素的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

来源

2013-12-10 01:06:38

Jquery .click切换文本输入框

回答

相关问题