使用 jQuery 实现 Facebook 风格的多个配置文件编辑

Question

我正在尝试创建 facebook 风格的多个文本框编辑，但不起作用。

 var inputId = '';
 var that = '';
 var data = '';
 $(".text_wrapper").live('click', function() {
    that = this;
    data=$(this).html();    
    inputId = '#'+$(this).next().attr("id");
    $(inputId).val(data);
    $(inputId).show();
    $(that).hide();
    $(inputId).focus();
 });

 $(inputId).live("mouseover", function(e){
    $(inputId).hide();$(that).show();
 });

 $(inputId).change(function() {
    $(inputId).hide();
    var boxval = $(inputId).val();
    var dataString = 'data='+ boxval;
    $.ajax({
      type: "POST",
      url: "test.php",
      data: dataString,
      cache: false,
      success: function(html) {
        $(that).html(boxval);
        $(that).show();
      }
    });
 });

这是 html

    <div class="text_wrapper">1245</div><input id="3123" name="timeout" type="text" 
class="edit" size="20" value="" />

    <div class="text_wrapper">98745</div><input id="3122" name="timeout" type="text" 
class="edit" size="20" value="" />

提前谢谢..

Answer 1

 <div>
 <div class="text_wrapper">1245</div>
 <input id="3123" name="timeout" type="text" class="edit" size="20" value="" />
 <div>

 <div>
 <div class="text_wrapper">98745</div>
 <input id="3122" name="timeout" type="text" class="edit" size="20" value="" />
 </div>




   jQuery(function(){

       //stpe 1
      jQuery('.text_wrapper').bind('mouseover',function(e){
             var elm = $(e.target);
             elm.hide();                     
            elm.parents('div:first')
           .find('input[type=text]').val(elm.html()).show()focus();              
       });

     //step 2
     //you should use 'blur' here rather than 'mouseover'
     // i have chosen mouseover as u have specified this in ur codes
      $('.edit').live("mouseover", function(e){
          var elm=$(e.target);
          elm.hide();
         elm.parents('div:first').find('.text_wrapper')
         .html(elm.val()).show();
       });

    //step 3
    // i dont think 'change' is good option, choose some other
    $('.edit').bind('change',function (e) {
        var elm = $(e.target);
        elm.hide();
        var boxval = elm.val();
        var dataString = 'data=' + boxval;
        $.ajax({
            type: "POST",
            url: "test.php",
            data: dataString,
            cache: false,
            success: function (html) {
                $(that).html(boxval);
                $(that).show();
            }
        });
    });


   });

Answer 2

我更好的缩进显示至少一个问题...试试这个：

 $(".text_wrapper").live('click', function() {
    that = this;
    data=$(this).html();    
    inputId = '#'+$(this).next().attr("id");
    $(inputId).val(data);
    $(inputId).show();
    $(that).hide();
    $(inputId).focus();

    $(inputId).live("mouseover", function(e){
      $(inputId).hide();$(that).show();
    });

    $(inputId).change(function() {
      $(inputId).hide();
      var boxval = $(inputId).val();
      var dataString = 'data='+ boxval;
      $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        cache: false,
        success: function(html) {
          $(that).html(boxval);
          $(that).show();
        }
      });
   });

 });

注意：这仍然有严重的问题...每次点击时您都会添加事件处理程序...在设置它们之前需要清除它们（至少）。或者不要在单击事件中添加处理程序。

Answer 3

我在代码中看到的一个非常明显的问题是，inputId 是在 div 上的单击处理程序中设置的。您不能使用该变量来跟踪点击次数。为什么不将事件绑定到编辑类输入框呢？实际上，我不知道你为什么要在这段代码中跟踪这些 inputId。