javascript - 使用 jQuery 选择出现多次的类

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();

但是每次，无论我按下哪个按钮，都只会选择第一个 nth-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，那么您需要在按钮上使用委托(delegate)事件处理程序，如下所示:

$(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);