將值發送到單擊的項目

單擊某個元素時，我想將其他元素的值複製到與單擊的元素最接近的輸入字段。將值發送到單擊的項目

例如：在下面的代碼中，當我點擊類.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

將值發送到單擊的項目

回答

相關問題