使用函数为输入添加值

我不知道我创建的函数出了什么问题。 我试图创建一个美丽的国家选择器。 但看起来这个选择器什么都不会选择。 只是在开玩笑，所以我的问题是根据我的想法，我的函数应该在点击多个链接系列时更改被归类为country_input的输入字段的值。 但看起来它不会起作用。 但你们可以告诉我如何实现我的目标。

– ::: – HTML CODE – ::: –

  

 Country-1 Country-2 Country-3 Country-4 Country-5 And so on.... 

– ::: – jQuery CODE – ::: –

 jQuery.fn.change_country = function () { var country_name = $(this).innerHTML; $('input.country_input').val(country_name); }; 

– ::: – CSS CODE – ::: –

 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的函数的新手，所以请帮助我。

我做错了function定义吗？ 我错过了什么吗？ 我的代码完全失败了吗？

现场演示

提前致谢！

Answer 1

这有效：

和HTML：

  
 Country-1 Country-2 Country-3 

请参阅jsfiddle的工作示例。

编辑：我想你可能想在这样的场景中使用下拉（太多选项）。 然后你可以这样做：

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

使用HTML：

  
  Country-1 Country-2 Country-3  

Answer 2

在我看来，问题是你将change_country函数添加到jQuery中，但是当你调用它时，你会称之为正常的全局函数。

如果您将第一个JS行更改为此，它应该像现在一样工作：

 var change_country = function() { 

这将使它成为一个全局函数，然后调用它应该工作。

在次要说明中，所有元素都具有相同的ID – 这是不正确的，因为元素的ID应该是唯一的。

Answer 3

你可以试试这个：

  
 
Country-1
 
Country-2
 
Country-3
 
Country-4
  

Answer 4

我觉得你对如何实现它感到困惑。 您已经在jQuery.fn命名空间中定义了您的函数，在这个命名空间中，您通常会放置一个适用于一组DOM元素的jQuery插件。 但是，然后尝试直接使用指向change_country的元素上的onclick属性调用该函数，该元素不存在。 如果你以这种方式调用函数它实际上是：

onclick="jQuery.fn.change_country()"

但我不认为那是你真正想要做的。 inheritance人我会怎么做： http ： //jsfiddle.net/nWrAt/8/ …或多或少。