如何僅更改具有相同類的一個元素

Question

我正在處理的項目需要添加一個新元素並使用編輯按鈕更改元素。我該如何定位僅具有相同類別的元素並對其進行更改而不影響具有相同類別的其他元素？

CodePen example。

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

}); 

Answer 1

首先id應該是唯一的在同一文件中，所以你應該通過類代替重複者，如：

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

使用document.getElementById("newInput")將針對所有與此元素，使用e.target只是在點擊一個目標：

var editedInput = e.target.value; 

相反的：

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

你應該事件e傳遞到點擊：

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

Hoep這會有所幫助。

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>

Answer 2

如果這些元素將在類似陣列的方式加入，你要編輯的最後一個每一次，你可以使用：最後選擇

$('.class:last') 

Answer 3

你可以給你想改變一個唯一的ID的元素。它仍然可以具有相同的類，但是可以通過引用它的ID而不是其類名來引用它。