Question

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

- ::: - HTML CODE - ::: -

<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 CODE - ::: -

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命名空间中定义了您的函数，在这个命名空间中，您通常会放置一个适用于一组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应该是唯一的。

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>

使用函数为输入添加值

4 个答案: