使用函數爲輸入添加值

Question

我不知道我創建的函數中出現了什麼問題。我試圖創造一個美麗的國家選擇。但看起來這個選擇器不會選擇任何東西。只是開玩笑，所以我的問題是根據我的想法，我的功能應該改變輸入字段的值，該字段歸類爲country_input點擊多個系列的鏈接。但它看起來不會工作。但你們可以告訴我如何實現我的目標。

- ::: - HTML代碼 - ::: -

<input type="text" class="country_input" /> 
<br><br> 
<a href="#country-select" id="Change-1" onclick="change_country();" >Country-1</a> 
<a href="#country-select" id="Change-2" onclick="change_country();" >Country-2</a> 
<a href="#country-select" id="Change-3" onclick="change_country();" >Country-3</a> 
<a href="#country-select" id="Change-4" onclick="change_country();" >Country-4</a> 
<a href="#country-select" id="Change-5" onclick="change_country();" >Country-5</a> 
And so on.... 

- ::: - jQuery代碼 - ::: -

jQuery.fn.change_country = function() { 

          var country_name = $(this).innerHTML; 

          $('input.country_input').val(country_name); 

          }; 

- :: ： - CSS代碼 - ::: -

body a { text-decoration: none; display: block; width: 50%; color: #555; background: rgb(240, 240, 240); border: 2px solid #000; border-style: none none solid none; font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 5px; } 

body a:hover { color: #000; background: #fff; } 

body input { font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 3px; width: 50%; outline: none; } 

所以任何人都可以幫我解決這個問題。由於我是創建基於jQuery的函數的新手，所以請幫助我。

我在做錯誤的函數定義嗎？ 我錯過了什麼嗎？ 我的代碼是完全失敗的嗎？

LIVE DEMO

提前感謝！

Answer 1

這工作：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.countryLink').click(function(){ 
     var innerText = $(this).text(); 
     $('.country_input').val(innerText); 
    }); 
}); 
</script> 

和HTML：

<input name="Text1" type="text" class="country_input"/> 
<br/> 
<a href="#country-select" id="Change-1" class="countryLink">Country-1</a> 
<a href="#country-select" id="Change-2" class="countryLink">Country-2</a> 
<a href="#country-select" id="Change-3" class="countryLink">Country-3</a> 

看到jsfiddle工作示例。

編輯：我想你可能想在這種情況下使用下拉菜單（太多選項）。然後，你可以做這樣的：

$(document).ready(function(){ 
    $('.countryDropDown').change(function(){ 
     var innerText = $(this).children(':selected').text(); 
     $('.country_input').val(innerText); 
    }); 
}); 

隨着HTML：

<input name="Text1" type="text" class="country_input"/> 
<br/> 
<select name="Select1" class="countryDropDown"> 
    <option value="c1">Country-1</option> 
    <option value="c2">Country-2</option> 
    <option value="c3">Country-3</option> 
</select> 

Answer 2

我覺得你對如何實現這一點感到困惑。你已經在jQuery.fn命名空間中定義了你的函數，這是你典型地將一個jQuery插件放在一組DOM元素上的插件。但是，然後你嘗試直接調用該函數onclick屬性指向change_country不存在的元素。如果你調用這樣的功能它實際上是：

onclick="jQuery.fn.change_country()"

但我不認爲這就是你真正想做的事情。如何我會做到這一點：http://jsfiddle.net/nWrAt/8/ ...或多或少。

Answer 3

在我看來，問題在於您將change_country函數添加到jQuery中，但是當您調用它時，您將它稱爲正常的全局函數。

它應該像你現在擁有它，如果你改變第一個JS行這樣的：

var change_country = function() { 

這將使一個全局函數，然後調用它應該工作。

在備註上，您所有的a元素都具有相同的ID - 這是不正確的，因爲元素的ID應該是唯一的。

Answer 4

你可以試試這個：

<input type="text" class="country_input" /> 
<br> 
<div class="country-select">Country-1</div> 
<div class="country-select">Country-2</div> 
<div class="country-select">Country-3</div> 
<div class="country-select">Country-4</div> 

<script type="text/javascript"> 
$(function(){ 
    $(".country-select").click(function(){ 
     $('input.country_input').val($(this).innerHTML); 
    }); 
}); 
</script>