Saya sedang mencipta "Bahagian Komen Media Sosial" (Anda boleh menambah ulasan anda sendiri dengan menaip dalam kotak ulasan di bahagian bawah.) Saya ingin menambah butang Edit yang boleh ditukar kepada butang edit pada klik mana-mana komen. Saya sangat tidak biasa dengan cara melakukan ini. Saya cuba menambah fungsi klik yang mencipta kotak teks di mana anda boleh memasukkan teks, tetapi ia mencipta kotak teks pada setiap ulasan yang mempunyai butang edit. Bagaimana saya boleh menjadikan butang Edit lebih khusus kepada ulasan yang saya klik?
$(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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Untuk menjawab soalan anda secara umum...
Apabila anda menambah pendengar acara, elemen khusus akan dipaparkan pada atribut
targetacara. Jadi, jika kita mempunyai sesuatu seperti ini:Kita sebenarnya boleh menambah pengendali
clickpada div kerana acara "berbuih" sehingga ia berlaku.document.querySelector('.posts').addEventListener('click' (e) => { console.log(e.target.textContent); // Button 1, Button 2, etc. });