jquery只展开多个名称相似的文本区域中的一个文本区域

Question

我有多个文本区域具有相同的名称，但在末尾不同的数字(例如desc1, desc2, desc3，…)我想只展开ONE当我点击并聚焦于文本区域时。当文本区域失去焦点时，它应该恢复到原来的大小。(编辑注:网页加载完成后，只有一个文本区。用户将不得不点击添加行按钮来显示多个文本区域。)

<textarea name="desc1" placeholder="Description" class="form-control resizable itemDesc"></textarea>
<textarea name="desc2" placeholder="Description" class="form-control resizable itemDesc"></textarea>
<textarea name="desc3" placeholder="Description" class="form-control resizable itemDesc"></textarea>

这是目前为止我用到的JQuery脚本:

// when itemDesc textarea is focused, expand
$('textarea[name^="desc"]').focus(function () {
$(this).animate({
height: "200px",
width: "375px"
}, 500);
});
// when itemDesc textarea lose focus, retract
$('textarea[name^="desc"]').blur(function () {
$(this).animate({
height: "50px"
}, 500);
});

我知道它不工作，因为它是选择和扩展第一个文本区域。如何使用JQuery展开我点击的文本区域?

编辑:我很抱歉没有为我的情况提供一个完整的解释。总之，这是点击添加行按钮后textarea的复制代码

//$("#add_row").trigger("click");
$("#add_row").on("click", function() {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#tab_logic tr"), function() {
//console.log($(this).data("id"));
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
$("#table_row").val(newid);
var tr = $("<tr></tr>", {
id: "addr" + newid,
"data-id": newid,
});
//console.log(newid);
// loop through each td and create new elements with name of newid
$.each($("#tab_logic tbody tr:nth(0) td"), function() {
var td;
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a name
if ($(this).data("name") !== undefined) {
td = $("<td></td>", {
"data-name": $(cur_td).data("name"),
});
//tinymce.remove();
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
/*if($(this).data("name") == "desc"){
c = $(cur_td).find('textarea').clone().val("");
c.attr("id", $(cur_td).data("name") + newid);
}*/
if ($(this).data("name") == "quantity") {
c.val("1");
}
if ($(this).data("name") == "price") {
c.val("0");
}
if ($(this).data("name") == "position") {
c.val(newid);
td.addClass("hidden");
}
if ($(this).data("name") == "product") {
td.addClass("hidden");
}
c.attr("name", $(cur_td).data("name") + newid);
c.attr("dataid", newid);
c.appendTo($(td));
td.appendTo($(tr));
} else {
td = $("<td></td>", {
'text': $('#tab_logic tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#tab_logic'));
$(tr).find("td button.row-remove").on("click", function() {
$(this).closest("tr").remove();
calc();
for (i = 1; i <= $("#tab_logic tbody tr").length; i++) {
if ($('#addr0').length == 0) {
$('#tab_logic tbody tr:nth(' + (i - 1) + ')').attr("name", 'addr' + i);
$('#tab_logic tbody tr:nth(' + (i - 1) + ')').attr("id", 'addr' + i);
$('#tab_logic tbody tr:nth(' + (i - 1) + ')').attr("data-id", i);
$.each($('#tab_logic tbody tr:nth(' + (i - 1) + ') td'), function(index, value) {
$(this).children().attr("name", $(this).data("name") + i);
$(this).children().attr("dataid", i);
});
$('#table_row').val($("#tab_logic tbody tr").length);
} else {
$('#tab_logic tbody tr:nth(' + (i) + ')').attr("name", 'addr' + i);
$('#tab_logic tbody tr:nth(' + (i) + ')').attr("id", 'addr' + i);
$('#tab_logic tbody tr:nth(' + (i) + ')').attr("data-id", i);
$.each($('#tab_logic tbody tr:nth(' + (i) + ') td'), function(index, value) {
$(this).children().attr("name", $(this).data("name") + i);
$(this).children().attr("dataid", i);
});
$('#table_row').val($("#tab_logic tbody tr").length - 1);
}
}
});
//tinymce.init({menubar:!1,toolbar: false, statusbar: false,selector:"textarea",skin_url:$('meta[name="assets-path"]').attr("content")+"?path=js/skins/voyager",min_height:100,resize:"vertical"});
});

Answer 1

经过多次测试，我找到了一个解决方案，我认为它有点独特。名为desc1的文本区域在加载后默认在网页中，而其他文本区域需要通过单击我在网页中的添加行按钮来创建。我的按钮的工作原理是复制一个名为desc0的文本区域，它是隐藏的。由于文本区域(例如name="desc2",name="desc3")网页加载完成后没有加载，我的猜测是JQuery脚本不能适用于新创建的文本区。因此，我在名为desc0和desc1的html标签上使用了内联onfocus和onblur。代码应该是这样的:

<textarea name="desc0" onfocus="$(this).animate({ height: '200px', width: '375px' }, 500);" onblur="$(this).animate({ height: '50px' }, 500);" placeholder="Description" class="form-control resizable itemDesc"></textarea>
<textarea name="desc1" onfocus="$(this).animate({ height: '200px', width: '375px' }, 500);" onblur="$(this).animate({ height: '50px' }, 500);" placeholder="Description" class="form-control resizable itemDesc"></textarea>

Textarea desc1将工作，因为onfocus和onblur内联函数是直接在其标签。通过点击添加行按钮，整个textarea desc0被复制，包括onfocus和onblur内联函数。