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

问题描述：

我正在处理的项目需要添加一个新元素并使用编辑按钮更改元素。我该如何定位仅具有相同类别的元素并对其进行更改而不影响具有相同类别的其他元素？如何仅更改具有相同类的一个元素

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")将针对所有与此元素，使用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>

非常感谢你！ –

答

如果这些元素将在类似阵列的方式加入，你要编辑的最后一个每一次，你可以使用：最后选择

$('.class:last')

答

你可以给你想改变一个唯一的ID的元素。它仍然可以具有相同的类，但是可以通过引用它的ID而不是其类名来引用它。

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

相关推荐