javascript - jQuery 获取 div 的当前标签并填充

Question

我有多个 div，每个 div 都有一个文本框和一个标签。当文本框位于 .focus 时，我需要在标签中填充一些文本

到目前为止的脚本：

 $(function () {
   $('input:text').focus(function () {
     //how do I get the current label and populate with some text? and when clicking on a 
    //different textbox, I want to clear the previous label and just show the current
    //div's label with some data
 });
});

例如

<div>
    @Html.TextBoxFor(model => model.Title)
    <label>
    </label>
</div>
<div>
    @Html.TextBoxFor(model => model.Name)
    <label>
    </label>
</div>
<div>
    @Html.TextBoxFor(model => model.Address)
    <label>
    </label>
</div>

谢谢！

Answer 1

为您制作的工作示例：

http://jsfiddle.net/KhQtx/

HTML：

<div>
    <input type="text" title="Tittle" value=""/>
    <label>
    </label>
</div>
<div>
    <input type="text" title="Name" value=""/>
    <label>
    </label>
</div>
<div>
    <input type="text" title="Address" value=""/>
    <label>
    </label>
</div>​

JS：

$('input:text').focus(function () {
   // clean label
   $('input:text').next('label').html("");

   // get input title
   var title = $(this).attr('title');            

   // add html to label from input title
   $(this).next('label').html(title);
});​

Answer 2

$(function () {
    $('input:text').focus(function () {
        $(this).siblings('label').empty().html('what you want..');
    });
});

Answer 3

您可以使用parent并找到：

var label = $(this).parent().find('label')

Answer 4

尝试：

$('input:text').focus( function(){
    $(this).next().text('text here');
});

Answer 5

$('input:text').focus(function () {
   $('input:text').next('label').html(""); // reset all first
   $(this).next('label').html("Your text here");
});

看这里

Answer 6

$(function () {
   $('input:text').focus(function () {
     // To put textboxvalue in label
     $($(this).parent().find('label')).val($(this).val());
     // To put customvalue in label
     $($(this).parent().find('label')).val("Hi i am a label");
 });
});

Answer 7

$(function () {
   $('input:text').focus(function(e){
       $('div label').text("");
       $(this).next('label').text('SomeText');
    });
});​

例子。

注意：最好为 div 分配一个类名，如下所示

<div class="parentDiv">
    <input type="text" id="Title" />
    <label></label>
</div>

因此，您可以缩小选择范围，例如

       $('div.parentDiv label').text(""); 
       $(this).next('label').text('SomeText');

这将避免其他 div 的标签为空。