将值发送到单击的项目答案

【问题标题】：Send the value to the clicked item将值发送到单击的项目
【发布时间】：2013-10-25 08:27:59
【问题描述】：

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

例如：在下面的代码中，当我单击类.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/

【问题讨论】：

标签： javascript jquery html

【解决方案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

【讨论】：

我只想将值发送到最接近被点击的 .add 类的输入字段。您的代码会将值添加到那里的所有输入字段中。

【解决方案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");
});

【讨论】：

【解决方案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);
});

Demo

【讨论】：