Question

所以我有一个数据库列表，我已经迭代过了，我把每个项目都设置为模态，用户可以编辑每个项目，例如item->name, item->colour, item-title等。

每个<input></input>都有一个标题为edit-title的类，名称为edit-name，依此类推。

由于我使用ajax将此信息发送到我的数据库，所以我必须使用jQuery，所以我知道如果它是一次发生一次但不是多次的按钮，该怎么做。

以下是我用来获取数据的内容：

var title = $('.e-title').val();
var id = $('.e-id').val();
var subject = $('.e-class').val();
var date = $('.e-due').val();
var description = $('.e-description').val();

但每次只有第一个n-child（）被选中，无论我按哪个按钮。我怎么能找到这些类的最接近的实例来获取jQuery？

HTML

<div class="e-modal-form">

        <label id="e-id" style="display:none;" class="e-id"> {{ $assignment->id }} </label>
        <h5>Title</h5> <input class="form-control e-title" type="text" value="{{ $assignment->title }}"/> <br>
        <h5>Subject<h5> <select class="form-control e-class" value="{{ $assignment->class }}"> <option> e.g. Chemistry @foreach([1,2,3,4] as $num) <option> {{$num}} </option> @endforeach </select> <br>
        <h5>Due Date</h5> <input class="form-control e-due" type="date" min="2016-01-02" value="{{ $assignment->created_at->format('Y-m-d') }}"> <br>
        <h5>Description</h5> <textarea class="form-control e-description" rows="4">{{ $assignment->description }}</textarea>
        <button class="e-btn-edit e-btn e-update-button">
           <span class="glyphicon glyphicon-floppy-save"></span> Save
        </button>

      </div>

我的updateAssignment函数

function updateAssignment()
{

  var $container = $(this).closest('.e-modal-form');
  var title = $container.find('.e-title').val();
  var id = $container.find('.e-id').val();
  var subject = $container.find('.e-class').val();
  var date = $container.find('.e-due').val();
  var description = $container.find('.e-description').val();

  alert(title);

  $.get('/updateAssignment', {title: title, id: id, class: subject, date: date, description: description}, function()
  {


  });



}

我是如何尝试从document.ready处理程序

调用它的

$('.e-update-button').click(function() {

      updateAssignment();

 });

Answer 1

要执行此操作，您可以从单击的按钮遍历DOM以获取同一div容器中的相关输入。试试这个：

$('.e-btn-edit').click(function() {
    var $container = $(this).closest('.e-modal-form');
    var title = $container.find('.e-title').val();
    var id = $container.find('.e-id').val();
    var subject = $container.find('.e-class').val();
    var date = $container.find('.e-due').val();
    var description = $container.find('.e-description').val();

    // work with the values here...
});

如果在加载页面后将模态div附加到DOM，那么您需要在按钮上使用委托事件处理程序，如下所示：

$(document).on('click', '.e-btn-edit', function() {
    // the rest of the above code...
});

更新

鉴于更新问题中的逻辑流程，您需要修改代码，如下所示：

function updateAssignment() {
    var $container = $(this).closest('.e-modal-form');
    var title = $container.find('.e-title').val();
    var id = $container.find('.e-id').val();
    var subject = $container.find('.e-class').val();
    var date = $container.find('.e-due').val();
    var description = $container.find('.e-description').val();

    // work with the values here...
});

$('.e-btn-edit').click(updateAssignment);

Answer 2

您需要遍历回包含所有元素的父级，然后从中找到所有必需元素并提取值。代码如下所示

$('.e-btn').on('click',function(){
     var $parentDiv = $(this).closest('div.e-modal-form');

     var title = $parentDiv.find('.e-title').val();
     var id = $parentDiv.find('.e-id').val();
     var subject = $parentDiv.find('.e-class').val();
     var date = $parentDiv.find('.e-due').val();
     var description = $parentDiv.find('.e-description').val();

     //your stuff here
    });

使用jQuery选择多次出现的类

2 个答案: