javascript - 将值发送到单击的项目

Question

当点击一个元素时，我想将另一个元素的值复制到离被点击元素最近的输入字段。

例如:在下面的代码中，当我单击具有类 .add 的 span 时，我想显示包含列表项的 div .values。然后单击任何列表项，我想将其类复制到单击的输入字段。

我在执行第 3 步时遇到问题，我无法找出单击了哪个元素，因此我无法将值发送到那里。如何传递被点击元素的引用，以便它知道将值发回何处？

这是我正在尝试的:

HTML:

<div class="wrap">

    <div class="item">
        <label>Item 1 </label>
        <span class="add">Add</span>
        <input type="text" name="item1" />
    </div>   

    <div class="item">
        <label>Item 2 </label>
        <span class="add">Add</span>
        <input type="text" name="item2" />
    </div>           

</div>

<div class="values">
    <ul>
        <li class="one">One </li>
        <li class="two">Two </li>
        <li class="three">Three </li>
    </ul>
</div>

jQuery:

$(document).on('click','.add',function(e){
    $(".values").css("display","block");
});

$(document).on('click','.values ul li',function(e){
    var value = $(this).attr('class');    
    $(this).closest(".item").find("input[type=text]").val(value);
});

演示: http://jsfiddle.net/YJE8d/

Answer 1

您可以将类添加到 .add 文本并搜索它以将值添加到输入中

$(document).on('click','.add',function(e){
    $(".values").css("display","block");
    $(this).closest('.wrap').find('.add').removeClass('clicked');
    $(this).addClass('clicked');
});

$(document).on('click','.values ul li',function(e){
    var value = $(this).attr('class');    
    $('.clicked').next().val(value);
});

.closest() 搜索最近的父元素，因此它不会像您尝试使用的那样工作

DEMO