将值发送到单击的项目

Question

单击某个元素时，我想将该值从另一个元素复制到所单击元素的最近输入字段。

例如：在下面的代码中，当我单击带有.add类的范围时，我想显示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

Answer 2

$(document).on('click','.add',function(e){
    $(".values").css("display","block");
    $(this).closest(".item").find("input[type=text]").addClass("active");
});

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

Answer 3

试试这个，

<强> HTML

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

    <div class="item" id="second">
        <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>

<强> SCRIPT

$(document).on('click','.add',function(e){
    itemData=$(this).closest('.item').attr('id');
    $(".values").css("display","block").data('item',itemData);
});

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

Demo