jQuery保留其他方框未编辑状态

Question

在下面的代码中，当我单击编辑时，其他方框放开编辑的图标，直到单击取消为止。

有没有，我可以拥有它，如果一个盒子没有被编辑它保持了正常的代码状态？

我使用的库是：https://vitalets.github.io/x-editable/

一般状态：

当点击编辑按钮：

jQuery的：

/* X-Editable */ 

$(function(){ 


$.fn.editable.defaults.mode = 'inline'; 

$.fn.editable.defaults.params = function (params) { 
    params._token = $("#_token").data("token"); 
    return params; 
}; 
    var dataURL = $('.updateField').data('url'); 
    var inputName = $('.updateField').attr("name"); 

$('.updateField').editable({ 
    type: 'text', 
    url: dataURL,  
    name: inputName,  
    placement: 'top', 
    title: 'Enter public name', 
    toggle:'manual', 
    send:'always', 
    ajaxOptions:{ 
     dataType: 'json' 
    }  
}); 

$('.edit').click(function(e){ 
    var container = $(this).closest('.input-group'); // !! 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     container.find('.updateField').editable('toggle'); // !! 
     container.find('.edit').hide(); // !! 
}); 
    $(document).on('click', '.editable-cancel, .editable-submit', function(e){ 
     $(e.target).closest('.input-group').find('.edit').show(); // !! 
    })   
//ajax emulation. Type "err" to see error message 
$.mockjax({ 
    url: '/post', 
    responseTime: 100, 
    response: function(settings) { 
     if(settings.data.value == 'err') { 
      this.status = 500; 
      this.responseText = 'Validation error!'; 
     } else { 
      this.responseText = ''; 
     } 
    } 
}); 

}); 

正常状态HTML：

<input name="__RequestVerificationToken" type="hidden" value="{{ csrf_token() }}" /> 
    <div class="box-body"> 
     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteName">Website Name</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Name" name="siteName" placeholder="Email" type="input" value="{{ old('siteName', $siteSettingsData->siteName)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteEmail">Website E-Mail Address</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1) }}"data-title="Website E-Mail Address" name="siteEmail" placeholder="Site E-Mail" type="email" value="{{ old('siteEmail', $siteSettingsData->siteEmail) }}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteCopyright">Website Copyright</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Copyright" name="siteCopyright" placeholder="Site Copyright" type="input" value="{{ old('siteCopyright', $siteSettingsData->siteCopyright)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- /.box-body --> 

Answer 1

尝试改变下面一行：

container.find('.edit').hide(); 

到

$(this).hide(); 

Answer 2

好像你使用的是一些引导设计template.From我的观点代码

$('.edit').click(function(e){ 
    var container = $(this).closest('.input-group'); // !! 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     container.find('.updateField').editable('toggle'); // !! 
     container.find('.edit').hide(); // !! 
}); 

似乎ok.I不懂行container.find（“ UPDATEFIELD”）。编辑（ '切换'）; // !!在函数中。是否使用某种类型的库。我的建议是从你的代码和测试中删除该行。同时检查你是否得到了正确的inputName输出值。最后，当你点击编辑按钮时，在控制台检查是否有错误。

Answer 3

尝试下面的代码使用$（E），而不是$（本）：

$('.edit').click(function(e){ 
    //var container = $(this).closest('.input-group'); 
    var container = $(e).closest('.input-group'); 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     container.find('.updateField').editable('toggle'); // !! 
     container.find('.edit').hide(); // !! 
});