使用函数向输入添加值

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

我是不是做错了函数定义？我是不是遗漏了什么？我的代码完全失败了吗？

现场演示

，谢谢，提前！

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>

参见小提琴中的工作示例。

编辑:我想您可能希望在这样的场景中使用下拉列表(选项太多了)。然后你就可以这样做：

$(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命名空间中定义了您的函数，这通常是您将在一组DOM元素上放置一个jQuery插件的地方。但是，然后尝试使用指向不存在的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应该是唯一的。