javascript - Clickable - 最后一项的点击功能传播到其他项

Question

我正在创建一个可点击 div 列表，以显示一个弹出窗口，其中包含与所点击项目相关的信息。

每个列表项都假设列表最后一项的“单击”功能。当我删除最后一项时，它们都假定新的最后一项的“单击”功能。

(例如:我单击列表中的任何项目，会出现一个弹出窗口，其中包含最后一个项目的信息。我通过单击“批准”按钮将其删除。当我单击任何项​​目时，都会出现一个弹出窗口与新的最后一项的信息)

我想要的是它显示点击项目的信息。

HTML

<ul id='absencesToApproveList'></ul>
<div class="popupBox approveAbsenceBox">
    <h3>Absence to Approve</h3>
    <div class="absencePhoto"></div>
    <p class="noteAbsence" ></p>        
    <button id="rejectAbsence"  style="width:40%; display:block-inline; float:left;">Reject</button>
    <button id="approveAbsence" style="width:40%; display:block-inline; float:right;">Approve</button>
</div>

JS

  function getAbsencesToApprove_success(tx, results) {
      var len = results.rows.length;
      if(internetStatus != 'none')
        $('#absencesToApproveList').empty()

      for (var i=0; i<len; i++) {
        var absence = results.rows.item(i);         
        var absenceType = absence.type;     
        var absenceText = absence.note;         
        var absenceDateFrom = absence.absenceFrom;      
        var absenceDateTo = absence.absenceTo;
        var yyyy = absenceDateFrom.split("-")[0];                   
        var mm = absenceDateFrom.split("-")[1];         
        var dd = absenceDateFrom.split("-")[2];
        var newAbsenceBox = $('<div class="absenceBox" style="border: 2px solid black; position:relative;" ')
                .append($('<div class="absenceDateBox" style="border: 2px solid black;" ')
                .append('<span style="display: inline-block;vertical-align: middle; line-height: normal;" </span ').text(dd + "/" + mm))
                .append($('<p class="absenceText" ').text(absenceText));
        var newAbsenceBoxItem = $('<li id="absence' + absence.id + 'Item" style="margin-left:-35px;" ').append(newAbsenceBox)
        $('#absencesToApproveList').append(newAbsenceBoxItem)
        $('#absence' + absence.id + 'Item').click(function(){   
            $('.absencePhoto').text('photo' + absence.id)
            $('.noteAbsence').text(absenceText)
            $('#addAbsenceBoxOuter2').show()            
            $('.approveAbsenceBox').show()
            $('#rejectAbsence').click(function () {     
                $('#addAbsenceBoxOuter2').hide()
                $('.approveAbsenceBox').hide()
                $('.absencePhoto').empty()
                $('.noteAbsence').empty()       
            })
            $('#approveAbsence').click(function () {
                $('#addAbsenceBoxOuter2').hide()
                $('.approveAbsenceBox').hide()
                $('.absencePhoto').empty()
                $('.noteAbsence').empty()
                db.transaction( 
                        function(tx){
                            tx.executeSql("DELETE FROM absences WHERE id=" + absence.id +";");
                        });

                db.transaction(
                        function(tx) {        
                            tx.executeSql("INSERT INTO absences (id,type,absenceFrom,absenceTo,note,aproved,picture) VALUES (" 
                                    + id++                                                                                                                        
                                    + ",'"                                                                                                                  
                                    + String(absenceType)                           
                                    + "','"                         
                                    + String(absenceDateFrom)                               
                                    + "','"                                 
                                    + String(absenceDateTo)                             
                                    + "','"                                 
                                    + absenceText                               
                                    + "',"                              
                                    + "'true'"  
                                    + ","                               
                                    + "'image.jpg'"                                 
                                    + ")");
                        }, transaction_error);

                db.transaction(getAbsences, transaction_error); 

            })      
          })
      }
      $('#absencesToApproveList').show()    
  }

演示: http://jsfiddle.net/8LdKh/3/提前致谢

Answer 1

不能使用变量absent.id和absentText，因为它将包含循环中的最后一个值。相反，您必须以某种方式获取所选 ID 并使用它。这是一个简单的方法。

var selectedID = this.id.substring(7,8); //Will work only for one digits
//$('.absencePhoto').text('photo' + absence.id)
$('.absencePhoto').text('photo' + selectedID) 

同样必须获取缺席文本值，

 //adding id on creation
 .append($('<p id="absenceText' + i + '" class="absenceText">').text(absenceText));
 //using id to fetch the value
 $('.noteAbsence').text($("#absenceText" + selectedID ).text())

Fiddle here