2

これは私のウェブサイトへの2回目の投稿です。私が試した他のすべてのサイトの中で、これは最も正確で有用な情報を提供しました！

ボタンに少し問題があります。受信トレイを作成し、メッセージのすべてのインスタンスに「返信」ボタンと「削除」ボタンを追加するタスクがあります。

すべてのメッセージが動的に生成されるため、HTMLコードをスクリプトに強制するよりも、それを行うためのより良い方法があるかどうか、私は確かにさまよっていました。ヘルプや提案をいただければ幸いです！（オブジェクトはJSONファイルから呼び出されます）。

$(document).ready(function(){
    $.getJSON('public/js/data.json', function(json){
        $.each(json.data, function(i, data){
            var output = '';
         if(data.from.id != '234' && data.from.name != 'Alan Ford'){

            $("#inbox").append(
            output +=
            '<div class="post">'+
            '<div class="h1">'+data.from.name+' - '+data.subject+'</div>'+ //this gives the name of the person who sent the message and the subject
            '<div class="content">'+data.message_formatted+'</div>'+ //The content of the message
                         //buttons should be squeezed left of the date
                           //this gives the date of the message sent
             '<div class="time">'+data.date_sent_formatted.formatted+'</div>'+ 
            '</div>'
    );
         }});
    });

});
var date_sent=convertToDateTime();

function delete_message(id){
    console.log('Delete message with id: '+id);
}

function reply_message(id, sender){
    console.log('Message id: '+id);
    console.log('Reply to: '+sender);
}
4

1 に答える 1

2 
$(document).ready(function() {            //when de html document is loaded
    $(".deleteButton").each(function() {  //for each button with class *deleteButton*
        var button = this;                //we take the html element
        $(button).click(function() {      //and we bind an eventlistener onclick
            alert($(button).attr("id"));  //when the user clicks we tell him the id 
            // code to execute when the user clicks on a delete button
        });
    });

    $(".replyButton").each(function() {
        var button = this;
        $(button).click(function() {
            alert($(button).attr("id"));
            // code to execute when the user clicks on a reply button
        });
    });
});

これにより、html のすべての削除/返信ボタンにクラスと ID を追加します。このような単純なリストがあるとしましょう。

<div> 
    <button class="deleteButton" id="1">Message 1</div>
    <button class="replyButton" id="1">Message 1</div>

    <button class="deleteButton" id="2">Message 2</div>
    <button class="replyButton"  id="2">Message 2</div>

    <button class="deleteButton" id="3">Message 3</div>
    <button class="replyButton"  id="3">Message 3</div>
</div>

ボタンの 1 つをクリックすると、ボタンの ID を示すアラートが表示されます。

于 2012-09-04T20:51:09.523 に答える