Отправить значение щелкнутому элементу

Question

Когда вы нажимаете на элемент, я хочу скопировать значение из другого элемента в ближайшее поле ввода к элементу с щелчком.

Например: В следующем коде, когда я нажимаю на 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() ищет ближайший родительский элемент, следовательно, он не будет работать так, как вы пытались использовать его

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