使用函数为输入添加值

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>