如何在 jquery 中动态更改标签文本

Question

HTML:

<center><p id="drag1" class="ui-widget-content"> Paragraph</p></center>

<div id="droppable" class="ui-sortable" ><ol></ol></div>

<div class="change">
<form>
Change title: <input type="text" id="titleName" />
<input type="button" value="ok" id="save" />
</form>
</div>

jquery:

$("#droppable").append('<li class="ui-state-default">' + '<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' +
  '<div class="address" id="InputsWrapper_2' + addressFieldCount + '">' +
'<p>' + '<label class="add">Address:' + addressFieldCount + '</label>' + '<br>'  +
     '<textarea type="text" name="myaddress[]" id="field_' + addressFieldCount + '" placeholder="Address' + addressFieldCount + '" />' +
 '<button class="removeclass1">x</button>' +
   '</p>' + '<br>' + '</div>' + '</li>');

$('.add').click(function(){      
  var labelAddress = $('.add'+addressFieldCount+'');
$(".change").find('input[type="text"]').val($(".add").text()).show().focus();
});

$(".change").focusout(function() {

$("#droppable").find('label').text(this.value).show();
 $('.add').text($('#titleName').val()).val;
   });

当标签 address1 和 address2 中已经拖放了两个或更多文本区域时，我只想将标签 address1 更改为在文本框中键入的值。我该怎么做？

Answer 1

假设 this.value 保存文本框值（例如，如果您在属于文本框的事件处理程序中）

如果你只想要第一个标签，你可以使用.eq(0)或.first():

$("#droppable").find('label').eq(0).text(this.value).show();

但是请注意，.find() 仅搜索第一级子元素。如果您需要更深入地搜索，可以使用选择器 $(<what>,<where>):

$('label', $("#droppable")).eq(0).text(this.value).show();

当然，如果 address1 是一个 id/class/whatever，您可以这样搜索：

$('.address1', $("#droppable")).eq(0).text(this.value).show();
$('#address1', $("#droppable")).eq(0).text(this.value).show();
$('label[name=address1]', $("#droppable")).eq(0).text(this.value).show();

更新：

我相信这就是你试图实现的，评论中的解释：

$(function () {
    var addressFieldCount = 5;

    for (i = 1; i <= addressFieldCount; i++) {
        $("#droppable").append('<li class="ui-state-default">' + '<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' +
            '<div class="address" id="InputsWrapper_2' + i + '">' +
            '<p>' + '<label class="add">Address:' + i + '</label>' + '<br>' +
            '<textarea type="text" name="myaddress[]" id="field_' + i + '" placeholder="Address' + i + '" />' +
            '<button class="removeclass1">x</button>' +
            '</p>' + '<br>' + '</div>' + '</li>');
    }


    $('.add').click(function () {
        //we save the index of the selected address. since we clicked the label, going
        //up 3 parents will get us the address div element and we store it's index somwhere safe
        $(".change").data("selectedAddress", $(this).parent().parent().parent().index());
        //since we are in the add's click handler, we can reference the current
        //add lable using $(this)
        $(".change").find('input[type="text"]').val($(this).text()).show().focus();
    });

    $(".change #titleName").focusout(function () {
        //first we retrieve the index of the address element that we stored earlier
        var selectedAddress = $(".change").data("selectedAddress");
        //next we retrieve the new title:
        var newTitle = $(this).val();
        //the next condition is to avoid changing the titles if you dont click an address first
        if (selectedAddress >= 0) {
            //since every address element only has 1 label, we can safely assume that if we 
            //use the address index, we will get the corresponding label
            $('label', $("#droppable")).eq(selectedAddress).text(newTitle).show();
        }
        //clear the textbox after we change the title
        $(this).val("");
        //clear selected address id
        $(".change").data("selectedAddress", "-1");

    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<center>
  <p id="drag1" class="ui-widget-content">Paragraph</p>
</center>
<div id="droppable" class="ui-sortable">
</div>
<div class="change">
  <form>Change title:
    <input type="text" id="titleName" />
    <input type="button" value="ok" id="save" />
  </form>
</div>

为了方便起见，这里有一个Fiddle

如何在 jquery 中动态更改标签文本

How to change the label text dynamically in jquery

html

jquery

jquery-ui