将值发送到单击的项目

单击某个元素时，我想将其他元素的值复制到与单击的元素最接近的输入字段。将值发送到单击的项目

例如：在下面的代码中，当我点击类.add的跨度时，我想要显示包含列表项的div .values。然后点击任何列表项，我想将其类复制到被点击的输入字段。

enter image description here

我遇到的第3步问题

，我无法找出被点击，所以我不能送价值有哪些元素。我如何传递clicked元素的引用，以便它知道在哪里发回值？

这里就是我想：

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/

来源

2013-10-25 user2738640

您可以添加类的。新增的文本，并搜索到的值最接近的父元素添加到输入

$(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

来源

2013-10-25 08:33:32 Anton

我要值仅发送这是最接近它被点击了。新增类的输入字段。您的代码会将值添加到那里的所有输入字段。 – user2738640

@ user2738640更新了答案 – Anton

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

来源

2013-10-25 08:36:13 user1129360

试试这个，

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

来源

2013-10-25 08:42:07

将值发送到单击的项目

回答

相关问题