国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Bearbeiten Sie dynamisch erstellten Text in Javascript
P粉268654873
P粉268654873 2024-03-31 14:17:41
0
1
675

Ich erstelle einen ?Social-Media-Kommentarbereich“ (Sie k?nnen Ihre eigenen Kommentare hinzufügen, indem Sie unten in das Kommentarfeld eingeben.) Ich m?chte eine Schaltfl?che ?Bearbeiten“ hinzufügen, die in eine Schaltfl?che ?Bearbeiten“ ge?ndert werden kann Klicken Sie auf einen beliebigen Kommentar. Ich bin sehr unbekannt, wie man das macht. Ich habe versucht, eine Klickfunktion hinzuzufügen, die ein Textfeld erstellt, in das Sie Text eingeben k?nnen, aber sie erstellt bei jedem Kommentar, der über eine Schaltfl?che zum Bearbeiten verfügt, ein Textfeld. Wie kann ich die Schaltfl?che ?Bearbeiten“ spezifischer für den Kommentar machen, auf den ich geklickt habe?

$(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粉268654873
P粉268654873

Antworte allen(1)
P粉593118425

從一般意義上回答你的問題......

當您添加事件偵聽器時,特定元素將顯示在事件的 target 屬性上。所以,如果我們有這樣的東西:

我們實際上可以向 div 添加一個 click 處理程序,因為 事件“冒泡”直到它。

document.querySelector('.posts').addEventListener('click' (e) => {
  console.log(e.target.textContent); // Button 1, Button 2, etc.
});
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage