同じクラスの要素を1つだけ変更する方法

Question

私が取り組んでいるプロジェクトでは、新しい要素を追加し、編集ボタンを使用して要素を変更する必要があります。同じクラスの要素だけを対象にして、同じクラスの他の要素に影響を与えずに変更するにはどうすればよいですか？

CodePen example。ユニークである必要があり、最後のセレクタ

$('.class:last') 

Answer 1

まずid：要素は、アレイ状に追加され、あなたが最後の1を毎回編集したい場合は

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 2

は、あなたが使用することができます同じ文書にあなたがクラスで重複するものを置き換える必要があり、例えば：

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

このを持つすべての要素を対象としますdocument.getElementById("newInput")を使用します、使用e.targetだけクリックされた1ターゲットにする：

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 3

あなたはユニークなIDを変更したい要素を与えることができます。それでも同じクラスを持つことはできますが、クラス名ではなくそのIDを参照することで参照できます。