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切換文本輸入框

回答

相關問題