如何仅对具有相同类的一个元素进行更改

How to make changes to only one element with the same class

本文关键字：一个 元素 何仅 同类      更新时间：2023-09-26

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

<

CodePen例子/strong>。

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();
   });
 });
});

首先，id在同一文档中应该是唯一的，所以你应该用类替换重复的，例如:

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

使用document.getElementById("newInput")将针对该id的所有元素，使用e.target仅针对单击的一个:

var editedInput = e.target.value;

代替:

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

您应该将事件e传递给click:

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

希望这对你有帮助。

var $input = $("#change");
var $btn = $("#add");
var $btne = $("#edit");
var $content = $("#content");
$btne.hide();
$btn.click( function(){
  var typedInfo = $("#change").val();
  var item = $('<li></li>');
  item.append(typedInfo);
  $content.append(item);
});
$content.on("click","li", function(){
  var clickedItem = $(this);
  var typeNew = $('<input type="text" class="newInput" value="'+clickedItem.text()+'">')
  $btne.show();
  $(this).html(typeNew);
  typeNew.click( function(e){
    e.stopPropagation();
  });
});
$btne.click( function(e){
  $($content).find('li>input').each(function(){
    $(this).parent().text($(this).val());
  })
  $(this).hide();
});
ul {
  display:flex;
  flex-direction:column;
}
li{
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="change" value="Type Here">
<button id="add">Add Button</button>
<button id="edit">Edit Button</button>
<ul id="content"></ul>

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

$('.class:last')

您可以为要更改的元素提供唯一ID。它仍然可以有相同的类，但是您可以通过引用它的ID而不是它的类名来引用它。

相关文章：