Javascript 如何仅对同一类中的一个元素进行更改

我正在处理的项目需要添加一个新元素，并使用“编辑”按钮对元素进行更改。如何只针对具有相同类的元素并对其进行更改，而不影响具有相同类的其他元素

var $input = $("#change");
var $btn = $("#add");
var $btne = $("#edit");
var $content = $("#content");
$btne.hide();


$btn.click( function(){

 var typedInfo = document.getElementById("change").value;
 var item = $('<li></li>');
 item.append(typedInfo);
 $content.append(item);


 $content.on("click","li", function(){
  });

 item.click(function(){
    var clickedItem = $(this);
     $btne.show();
     item.text(" ");
     var typeNew = $('<input type="text" id="newInput" value = "edit">')
   typeNew.click( function(e){
    e.stopPropagation();
  });
     item.append(typeNew);
       $btne.click( function(){
        var editedInput = document.getElementById("newInput").value;
        clickedItem.text(editedInput);
        $btne.hide();
   });
 });

});

var$input=$（“#更改”）；
var$btn=$（“添加”）；
var$btne=$（“#编辑”）；
var$content=$（“#content”）；
$btne.hide（）；
$btn.单击（函数（）{
var typedInfo=document.getElementById（“更改”）.value；
变量项=$（“
”）；
项目.附加（类型DINFO）；
$content.append（项目）；
$content.on（“单击”、“li”，函数（））{
});
项。单击（函数（）{
var clickedItem=$（此值）；
$btne.show（）；
项目.正文（“”）；
变量typeNew=$（''）
键入新建。单击（功能（e）{
e、 停止传播（）；
});
项目。附加（类型新）；
$btne.单击（函数（）{
var editedInput=document.getElementById（“newInput”）.value；
单击编辑项文本（编辑输入）；
$btne.hide（）；
});
});
});

如果元素将以类似数组的方式添加，并且每次都要编辑最后一个元素，则可以使用：last选择器

$('.class:last')

---

首先，

id

在同一文档中应该是唯一的，因此您应该按类替换重复的id，例如：

var typeNew = $('<input type="text" class="newInput" value = "edit">')

而不是：

var editedInput = document.getElementById("newInput").value;

您应该将事件

e

传递给单击：

$btne.click( function(e){
//____________________^
    var editedInput = e.target.value;
    clickedItem.text(editedInput);
    $btne.hide();
});

这有帮助

var$input=$（“#更改”）；
var$btn=$（“添加”）；
var$btne=$（“#编辑”）；
var$content=$（“#content”）；
$btne.hide（）；
$btn.单击（函数（）{
var typedInfo=$（“#更改”）.val（）；
变量项=$（“
”）；
项目.附加（类型DINFO）；
$content.append（项目）；
});
$content.on（“单击”、“li”，函数（））{
var clickedItem=$（此值）；
变量typeNew=$（''）
$btne.show（）；
$（this）.html（typeNew）；
键入新建。单击（功能（e）{
e、 停止传播（）；
});
});
$btne。单击（功能（e）{
$（$content）.find（'li>input'）。每个（函数（）{
$（this.parent（）.text（$（this.val（））；
})
$（this.hide（）；
});
ul{
显示器：flex；
弯曲方向：立柱；
}
李{
}

添加按钮
编辑按钮
您可以给要更改的元素一个唯一的id。它仍然可以具有相同的类，但您可以通过引用其id而不是其类名来引用它

$btne.click( function(e){
//____________________^
    var editedInput = e.target.value;
    clickedItem.text(editedInput);
    $btne.hide();
});