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

好像你正在使用一些bootstrap设计模板。从我的观点来看代码

$('.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(); // !!
});

似乎没问题。我不理解 container.find（＆＃39; .updateField＆＃39;）行.editable（＆＃39; toggle＆＃39;）; // !! 在函数中。你使用的是某种类型的库。我的建议是从代码中删除该行并测试。还要检查输入的inputName是否正确。最后在单击编辑按钮时检查控制台是否有任何错误。

Answer 3

在以下代码中尝试使用$（e）代替$（this）：

$('.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(); // !!
});

jQuery保持其他框未编辑状态

3 个答案: