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

Question

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

例如：在下面的代码中，当我单击带有 class 的 span 时.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()搜索最近的父元素，因此它不会按照您尝试使用它的方式工作

演示

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>

脚本

$(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);
});

演示