根据已单击的链接更改文本字段中的文本

时间:2013-08-13 01:19:00

标签: jquery

我有以下内容。

<div class="petsearch">
<input id="pet_search_input" class="" type="text" onkeypress="return isNumberKey(event)" name="query" autocomplete="off">
</div>

现在,如果用户在文本字段中键入dog,则下面的链接如下所示。

<a id="pets" href="#dog" onclick="main()">
<img title="Dog" alt="Dog" src="./images/dog.png">
</a>

现在,如果用户键入cat,则会显示该链接,但如下所示。

<a id="pets" href="#cat" onclick="main()">
<img title="Cat" alt="Cat" src="./images/cat.png">
</a>

所以为此我有一些看起来如下的jquery。

$("#pets").click(function () {
$("#hidden_content").hide("fast");
$("#yourpet").hide("fast");
$("#pet_search_input").hide("fast");
});

现在,我在每个图像旁边的同一页面上都有以下内容,文本字段将如下所示。

<input type="text" id="pet-type">

当用户点击链接时,上面的输入会显示一个单词。因此,如果链接是#cat,那么当单击链接时,输入将获得类似于Feline的值。如果链接有#dog,那么当用户单击具有#dog的链接时,输入将获得mut的值。

我的目标是让上述输入类型文本在用户点击链接时显示动物的名称。因此,如果用户点击链接并且链接显示为dog,则输入将更新为dog。我不知道如何实现这一目标。但值得注意的是,#dog可以是“狗”或“狗”。有人可以帮助我实现这一目标。

更新感谢@Alvin提供此代码,这意味着我正在接近我正在努力实现的目标。

$("#pets").click(function () {
    $("#hidden_content").hide("fast");
    $("#yourpet").hide("fast");
    $("#pet_search_input").hide("fast");
    var result = $("#pets").attr("href");
    result = result.replace("#","");
    $("#pet-type").attr("value",result);
});

但我想如果应该是以下内容。

$("#pets").click(function () {
    $("#hidden_content").hide("fast");
    $("#yourpet").hide("fast");
    $("#pet_search_input").hide("fast");
    if $("#pets").attr("href","#cat") then 
    $("pet-type".attr("value","Feline"); Else If
    if $("#pets").attr("href","#dog") then 
    $("pet-type".attr("value","mut");
});

上面的代码不起作用,但我认为人们应该看看我想要实现的目标。

更新我也尝试了以下内容。

if $("#pets".attr("href","#cat"),$("#pet-type").attr("value","Feline");
if $("#pets".attr("href","#dog"),$("#pet-type").attr("value","Mut");

已解决关闭

2 个答案:

答案 0 :(得分:2)

将javascript更改为

$("#pets").click(function () {
    $("#hidden_content").hide("fast");
    $("#yourpet").hide("fast");
    $("#pet_search_input").hide("fast");
    var result = $("#pets").attr("href");
    if (result == "#cat"){
        $("#pet-type").attr("value","Feline");
    }
    if (result == "#dog"){
        $("#pet-type").attr("value","Mut");
    }
});

希望这有帮助。

答案 1 :(得分:0)

如果我已正确理解你想做什么,这应该回答你的问题:

// Called on link click
function main() {
    $("#pets-input").val($("#pets").attr("href").substr(1));
}

这将有效,假设输入更改为<input type="text" id="pets-input">以避免ID冲突。