Edit teks yang dibuat secara dinamik dalam Javascript

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>

P粉268654873183 hari yang lalu380

Edit teks yang dibuat secara dinamik dalam Javascript

membalas semua(1)saya akan balas