使用 jQuery replaceWith();在特定班级

Question

我有一个通过 PHP/MySQL 填充的联系人表。每个联系人都在自己的行中，其类名是“行”，加上行号，例如“line01”或“line02”。

我有一个 jQuery 模式对话框，用于添加新联系人、编辑当前联系人和删除联系人。我使用.replaceWith() 进行编辑，使用.append(); 添加新联系人。我现在的挑战是让编辑功能正常工作，以便它只替换正在编辑的<div> 行，而不是所有行。

如何选择要替换的特定元素，或确保被替换的行与正在编辑的行具有相同的 ID？应该很简单，但我只是无法让它正常工作。感谢您的帮助！

这是我到目前为止的代码：

$("#contact-dialog").dialog({
    autoOpen: false,
    width: 600,
    modal: true,
    buttons: {
            "Add Contact": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( contact_first_name, "first name", 2, 64 );
                bValid = bValid && checkLength( contact_last_name, "last name", 2, 64 );
                bValid = bValid && checkLength( title, "title", 1, 64 );
                bValid = bValid && checkLength( phone, "phone", 6, 30 );
                bValid = bValid && checkLength( email_address, "email_address", 5, 128 );       

                /* Handle edit function */                  
                if (crow.val().length > 0) {
                    if ( bValid ) {
                        if (contact_count % 2) {
                          //$( "#contacts" ).html(
                         // '<div class="line'+contact_count+'">' +
                         $('.line'+contact_count).replaceWith(
                            '<div class="action gray">' +
                            '<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
                            '<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
                            '</div>' +
                            '<div class="contact gray"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
                            '<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
                            '<div class="phone gray"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
                            '<div class="email gray"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
                            '<div class="primary gray"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
                            '<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
                            '<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
                            '<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
                            '<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
                            '</div>' +
                            '<div class="clear"></div>');
                            $( this ).dialog( "close" );
                          } 
                       else {
                          //$( "#contacts" ).html( 
                           // '<div class="line'+contact_count+'">' +
                          $('.line'+contact_count).replaceWith(
                            '<div class="action">' +
                            '<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
                            '<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
                            '</div>' +
                            '<div class="contact"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' + 
                            '<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
                            '<div class="phone"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
                            '<div class="email"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
                            '<div class="primary"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
                            '<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
                            '<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
                            '<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
                            '<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
                            '</div><div class="clear"></div>');
                            $( this ).dialog( "close" );
                        }
                        contact_count++;
                     }

                }
                /* Handle new contact rows */
                else if ( bValid ) {
                    if (contact_count % 2) {
                      $( "#contacts" ).append(
                        '<div class="line'+contact_count+'">' +
                        '<div class="action gray">' +
                        '<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
                        '<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
                        '</div>' +
                        '<div class="contact gray"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
                        '<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
                        '<div class="phone gray"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
                        '<div class="email gray"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
                        '<div class="primary gray"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
                        '<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
                        '<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
                        '<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
                        '<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
                        '</div><div class="clear"></div>');
                        $( this ).dialog( "close" );
                      } else {
                      $( "#contacts" ).append( 
                        '<div class="line'+contact_count+'">' +
                        '<div class="action">' +
                        '<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
                        '<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
                        '</div>' +
                        '<div class="contact"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' + 
                        '<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
                        '<div class="phone"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
                        '<div class="email"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
                        '<div class="primary"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
                        '<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
                        '<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
                        '<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
                        '<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
                        '</div><div class="clear"></div>');
                        $( this ).dialog( "close" );
                      }
                      contact_count++;                      
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

编辑：这是edit_contact()的代码：

function edit_contact(contact_line, cid) {
    // $('#contact-dialog-link').val('edit');
    $('#contact-dialog-id').val(cid);
    $('#contact-first-name').val($('.line'+contact_line+' #contact-first-name'+contact_line).val());
    $('#contact-last-name').val($('.line'+contact_line+' #contact-last-name'+contact_line).val());
    $('#title').val($('.line'+contact_line+' #title'+contact_line).val());
    $('#cphone').val($('.line'+contact_line+' #cphone'+contact_line).val());
    $('#email-address').val($('.line'+contact_line+' #email-address'+contact_line).val());
    $('#twitter').val($('.line'+contact_line+' #twitter'+contact_line).val());
    $('#facebook').val($('.line'+contact_line+' #facebook'+contact_line).val());
    $('#linkedin').val($('.line'+contact_line+' #linkedin'+contact_line).val());
    $('#contact-update').val(contact_line);
    $('#contact-dialog-link').trigger('click');
}

编辑：这是处理保存功能的PHP：

if ($_POST && $_POST['type'] == 'add-to-contacts') {
$fid = $_SESSION['facility_current'];
if ($_POST['input'] == 'edit') {
//  if ($_POST['contact-update'] == ''){
    $dbQuery = sprintf("UPDATE facility_contacts SET fid=%d, first_name='%s', last_name='%s', title='%s', phone='%s', email_address='%s', twitter='%s', facebook='%s', linkedin='%s' WHERE cid = %d;", $fid,$_POST['first_name'],$_POST['last_name'],$_POST['title'],$_POST['phone'],$_POST['email_address'],$_POST['twitter'],$_POST['facebook'],$_POST['linkedin'],$_POST['cid']);
} else {
    $dbQuery = sprintf("INSERT INTO facility_contacts (fid, first_name, last_name, title, phone, email_address, twitter, facebook, linkedin) VALUES (%d,'%s','%s','%s','%s','%s','%s','%s','%s');", $fid,$_POST['first_name'],$_POST['last_name'],$_POST['title'],$_POST['phone'],$_POST['email_address'],$_POST['twitter'],$_POST['facebook'],$_POST['linkedin']);
}
$dbResult = $dbc->query($dbQuery,__FILE__,__LINE__);
unapprove_proof_status();
echo ($dbResult) ? true : false;
exit;

}

Answer 1

我不确定您的$('#contact-first-name').val() 选择器是否足够具体。您可能需要$('#contact-first-name', '.line'+contact_line).val() 之类的东西来选择特定<div class="line'+contact_count+'"> 中的联系人input 项目。我会试试这个：

$("#contact-dialog").dialog({
    autoOpen: false,
    width: 600,
    modal: true,
    buttons: {
            "Add Contact": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( contact_first_name, "first name", 2, 64 );
                bValid = bValid && checkLength( contact_last_name, "last name", 2, 64 );
                bValid = bValid && checkLength( title, "title", 1, 64 );
                bValid = bValid && checkLength( phone, "phone", 6, 30 );
                bValid = bValid && checkLength( email_address, "email_address", 5, 128 );       

                var alt = contact_count % 2 ? ' gray': '';

                /* Handle edit function */                  
                if (crow.val().length > 0) {
                    if ( bValid ) {
                         $('.line'+contact_count).replaceWith(
                            '<div class="action' + alt + '">' +
                            '<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
                            '<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
                            '</div>' +
                            '<div class="contact' + alt + '"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
                            '<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
                            '<div class="phone' + alt + '"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
                            '<div class="email' + alt + '"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
                            '<div class="primary' + alt + '"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
                            '<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
                            '<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
                            '<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
                            '<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
                            '</div>' +
                            '<div class="clear"></div>');
                            $( this ).dialog( "close" );

                        contact_count++;
                     }

                }
                /* Handle new contact rows */
                else if ( bValid ) {
                      $( "#contacts" ).append(
                        '<div class="line'+contact_count+'">' +
                        '<div class="action' + alt + '">' +
                        '<a href="javascript:edit_contact('+contact_count+');"><img src="images/icons/edit.png" width="15" height="16" border="0" /></a>' +
                        '<a href="javascript:delete_contact('+contact_count+');"><img src="images/icons/trash.png" width="11" height="16" border="0" /></a>' +
                        '</div>' +
                        '<div class="contact' + alt + '"><input type="hidden" id="contact-first-name'+contact_count+'" name="contact_first_name[]" value="'+contact_first_name.val()+'" />' +
                        '<input type="hidden" id="contact-last-name'+contact_count+'" name="contact_last_name[]" value="'+contact_last_name.val()+'" />'+contact_first_name.val()+' '+contact_last_name.val()+'</div>' +
                        '<div class="phone' + alt + '"><input type="hidden" id="cphone'+contact_count+'" name="cphone[]" value="'+phone.val()+'" />'+phone.val()+'</div>' +
                        '<div class="email' + alt + '"><input type="hidden" id="email-address'+contact_count+'" name="email_address[]" value="'+email_address.val()+'" />'+email_address.val()+'</div>' +
                        '<div class="primary' + alt + '"><input type="radio" id="primary'+contact_count+'" name="primary[]" value="1" /></div>' +
                        '<input type="hidden" id="twitter'+contact_count+'" name="twitter[]" value="'+twitter.val()+'" />' +
                        '<input type="hidden" id="facebook'+contact_count+'" name="facebook[]" value="'+facebook.val()+'" />' +
                        '<input type="hidden" id="linkedin'+contact_count+'" name="linkedin[]" value="'+linkedin.val()+'" />' +
                        '<input type="hidden" id="title'+contact_count+'" name="title[]" value="'+title.val()+'" />' +
                        '</div><div class="clear"></div>');
                        $( this ).dialog( "close" );
                      contact_count++;                      
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

function edit_contact(contact_line, cid) {
    $('#contact-dialog-id').val(cid);
    $('#contact-first-name', '.line'+contact_line).val($('.line'+contact_line+' #contact-first-name'+contact_line).val());
    $('#contact-last-name', '.line'+contact_line).val($('.line'+contact_line+' #contact-last-name'+contact_line).val());
    $('#title', '.line'+contact_line).val($('.line'+contact_line+' #title'+contact_line).val());
    $('#cphone', '.line'+contact_line).val($('.line'+contact_line+' #cphone'+contact_line).val());
    $('#email-address', '.line'+contact_line).val($('.line'+contact_line+' #email-address'+contact_line).val());
    $('#twitter', '.line'+contact_line).val($('.line'+contact_line+' #twitter'+contact_line).val());
    $('#facebook', '.line'+contact_line).val($('.line'+contact_line+' #facebook'+contact_line).val());
    $('#linkedin', '.line'+contact_line).val($('.line'+contact_line+' #linkedin'+contact_line).val());
    $('#contact-update').val(contact_line);
    $('#contact-dialog-link').trigger('click');
}

通过使用$('#itemToUpdate', '#divWhereItLives')，您可以设置在何处查找要更新的项目的上下文 - 请参阅http://api.jquery.com/jQuery/

编辑：应该是var alt = contact_count % 2 ? ' gray': '';。对不起