Question

目前我的脚本下面显示了代码中第一个变量的$(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){ console.log(inputName); e.stopPropagation(); $('.updateField').editable('toggle'); $('.edit').hide(); }); $(document).on('click', '.editable-cancel, .editable-submit', function(){ $('.edit').show(); })，无论点击什么按钮。如何更改脚本以便我可以获取输入名称foreach行，我是否必须使用ID +类选择器？

jQuery的：

<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>

HTML示例：

int zip = 12345;
String strZip = Integer.toString(zip);
char[] charArrayZip = strZip.toCharArray();

Answer 1

由于您要选择一个元素作为单击beign的父元素，您可以使用.closest()遍历DOM并找到与您的selector匹配的第一个元素。如下所示：

$('.edit').click(function(e){ 
   var update_field=$(this).closest('.updateField');
    //now you have the element you want so you can do whatever you want with it
     var inputName =update_field.attr('name');
     update_field.editable('toggle');
      ........
      });

Answer 2

由于您有多个.updateField元素，因此您需要使用closest()然后使用find()函数在点击函数中找到目标元素。

$('.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();
  input.editable('toggle');
  container.find('.edit').hide();
});
$(document).on('click', '.editable-cancel, .editable-submit', function() {
  $('.edit').show();
});

小提琴： https://jsfiddle.net/trex005/3oy60m31/

Answer 3

您需要单独为每个# an example bit of data dat2 <- cbind(x=1:2,y=2:3,z=3:4, dat) dat2 # x y z c a1 a2 b1 b2 #1 1 2 3 1 1 3 5 7 #2 2 3 4 2 2 4 6 8 idv <- match(c("x","y","z","c"), names(dat2)) reshape(dat2, idvar=idv, direction="long", sep="", varying=-idv, timevar=NULL) # x y z c a b #1.2.3.1.1 1 2 3 1 1 5 #2.3.4.2.1 2 3 4 2 2 6 #1.2.3.1.2 1 2 3 1 3 7 #2.3.4.2.2 2 3 4 2 4 8生效代码。

.updatefield

要记住的主要事情是返回一些值的jQuery方法将仅返回集合中第一个元素的请求值（ set是jQuery对象中的元素）。

因此，当您执行$(function() { $.fn.editable.defaults.mode = 'inline'; $.fn.editable.defaults.params = function(params) { params._token = $("#_token").data("token"); return params; }; $('.updateField').each(function() { var currentUpdateField = $(this); var dataURL = currentUpdateField.data('url'); var inputName = currentUpdateField.attr("name"); currentUpdateField.editable({ type: 'text', url: dataURL, name: inputName, placement: 'top', title: 'Enter public name', toggle: 'manual', send: 'always', ajaxOptions: { dataType: 'json' } }); currentUpdateField.closest('.input-group').on('click', '.edit', function(e) { console.log(inputName); e.stopPropagation(); currentUpdateField.editable('toggle'); $(this).hide(); }); }); $(document).on('click', '.editable-cancel, .editable-submit', function() { $('.edit').show(); }) });时，它将返回此类的所有元素，但是当您执行$('.updateField')时，您将返回第一个$('.updateField').data('url')的{{1}} DOM。

jQuery ID +类选择器

3 个答案: