我正在創建一個「社交媒體評論部分」（您可以透過在底部的評論框中輸入內容來添加您自己的評論。）我想添加一個編輯按鈕，該按鈕可以更改為對於單擊編輯按鈕的任何評論。我非常不熟悉如何做到這一點。我嘗試添加一個單擊功能，該功能創建一個文本框，您可以在其中輸入文本，但它會在每個具有編輯按鈕的評論上創建文本框。 如何讓「編輯」按鈕更具體地顯示所點擊的評論？
$(document).ready(function(){
let value;
let storeValues = []
let storeValueName;
let storeValueComment;
$('#addComment').click(function(){
storeValueName = getName();
storeValueComment = getComment();
storeValues.push(storeValueName);
storeValues.push(storeValueComment);
value = getName() + getComment();
function getName(){
let grabName;
$('#name').val(function(i, v){
grabName = v;
})
return grabName;
}
function getComment(){
let grabComment;
$('#bodyText').val(function(i, v){
grabComment = v;
})
return grabComment
}
console.log(storeValues);
$('.eachComment').prepend('<div class="comments">' +'<img class="imgClass" src="userImage.jpg">'+'<p class="nameVal">'
+ storeValueName +'</p>' + '<p class="commentVal">'+ storeValueComment +'</p>'+
'<input type="button" id="edit" value="Edit" />'+ '<input type="button" id="delete" value="Delete" />' + '</div>');
$('#edit').click(function(){
})
})
})
body{
background-color: #E5E5E5
}
#wholeForm{
margin: 0 auto;
width: 800px;
height: 400px;
position: relative;
background-color: #D3D3D3;
font-family: helvetica;
}
#question{
padding: 0px;
margin: 0px;
width: 780px;
height: 75px;
background-color: white;
padding:10px;
}
#nameOfPerson{
font-size:13px;
margin: 0;
padding: 0;
}
#commentOfPerson{
font-size:25px;
font-weight: bold;
margin: 0;
padding: 0;
}
.form2{
width: 800px;
height: 458px;
}
.comments{
background-color: white;
width: 780px;
height: 75px;
position: relative;
margin: 10px;
}
.form1{
padding:20px;
margin-bottom: 10px;
width: 758px;
position: absolute;
bottom: -10px;
background-color: white;
}
#addComment{
display: inline-block;
margin-left: 35px;
}
#name{
width: 125px;
}
#bodyText{
width: 500px;
}
.formInput{
display: inline-block;
}
.nameVal{
display: inline-block;
font-size: 12px;
position: absolute;
}
.commentVal{
display: inline-block;
position: absolute;
font-weight: bold;
font-size: 18px;
bottom: 5px;
}
.imgClass{
display: inline-block;
height: 65px;
width: 65px;
margin: 5px;
}
#edit{
position: absolute;
right:55px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#delete{
position: absolute;
right:0px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#edit:hover{
color:#DDA0DD
}
#delete:hover{
color:#DDA0DD
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div id='wholeForm'>
<div id="question">
<p id="nameOfPerson">WhySoSerious45</p>
<p id="commentOfPerson">Trying to decide a career path? Programming is the move. Change my mind.</p>
</div>
<div class='form2'>
<div class='eachComment'>
<div class="comments">
<img class="imgClass" src="userImage.jpg">
<p class="nameVal">Jonny R</p>
<p class="commentVal">I wish I knew how to program! Maybe ill start learning?</p>
<input type="button" id="edit" value="Edit">
<input type="button" id="delete" value="Delete">
</div>
</div>
</div>
<div class='form1'>
<div class='formInput'>
<input type="text" id="name" placeholder="Display Name"/>
<input type='text' id="bodyText" placeholder="Comment"></textarea>
</div>
<input type="button" id="addComment" value="Submit">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
從一般意義上回答你的問題...
當您新增事件偵聽器時，特定元素將顯示在事件的
target屬性上。所以，如果我們有這樣的東西：我們實際上可以為 div 添加一個
click處理程序，因為 事件「冒泡」直到它。document.querySelector('.posts').addEventListener('click' (e) => { console.log(e.target.textContent); // Button 1, Button 2, etc. });