javascript - 与 sibling 的麻烦

Question

我正在尝试获取表单中同级输入字段的值。目标是比较两个日期字段；刚刚更改的字段以及该表单中的其他日期字段。每个日期字段都是“date”类。我可以获得当前字段的值，但是当我尝试获取同级集中的其他字段时，我得到“未定义”而不是该字段的值。这是 JavaScript 代码:

    $(".adate").change(function(){


        var name = $(this).attr("name");

        if (name == 'start') {

            var start = new Date($(this).val());
            var end = new Date($(this).siblings('[name="end"]').val());

        } else {

            var end = new Date($(this).val());
            var sibs = $(this).siblings('.adate');

            var start = new Date(sibs.eq(0).val());
        }

        if(end < start) alert("The end date must be after the start date.");

    });

这是 html:

<div class='jumbotron'>
    <table>
        <tr><td>Type</td><td>Start Date</td><td>End Date</td><td>By</td><td></td><td></td></tr><form action="manage.php" method="post">
            <tr>
                <td ><select name="type"  class="form-control" style="width:auto;"><option value="hunt" selected >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td><td><input type="date" name="start" value="2015-12-07" class="form-control adate" /></td>
                <td><input type="date" name="end" value="2015-12-09" class="form-control adate" /></td>
                <td><input type="text" name="uid" value="phil" class="form-control" readonly style="width:80px;" /></td>
                <td><input type="hidden" name="id" value="1" /><button class="btn btn-sm btn-primary btn-block" type="submit">Save</button></td></form>
                <td><form action="manage.php" method="post"><input type="hidden" name="id" value="1" /><input type="hidden" name="delete" value="delete" /><button class="btn btn-sm btn-primary btn-block" type="submit" style="background-color:red; " >Del</button></form></td>
            </tr><form action="manage.php" method="post">
            <tr>
                <td><select name="type"  class="form-control" style="width:auto;"><option value="hunt" >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td>
                <td><input type="date" name="start"  class="form-control adate" value="2015-11-17" /></td>
                <td><input type="date" name="end"   class="form-control adate" /></td>
                <td><input type="text" name="uid" value="phil"  class="form-control"  style="width:80px;" readonly/></td>
                <td><button class="btn btn-sm btn-primary btn-block" type="submit">Add</button></form>
            </tr>
      </table>
</div>

我做错了什么？

Answer 1

这是一种实现方法，假设您只有两个名称不同的输入字段。这里的优点是，无论元素是否是兄弟元素，都会被挑选出来。

$(".adate").change(function() {
  
  var theRow = $(this).parents("tr");
  
  /* theTag is for demo only, shows that the right row is picked out */
  var theTag = theRow.attr('class');
  alert(theTag);

  var theStartDate = new Date($(theRow).find(".adate[name='startDate']").val());
  var theEndDate = new Date($(theRow).find(".adate[name='endDate']").val());

  if (theEndDate < theStartDate) {
    alert("The end date must be after the start date.");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class="row1">
    <td>
      <input class="adate" type="text" name="startDate" value="2015-10-10">
    </td>
    <td>
      <input class="adate" type="text" name="endDate" value="2015-10-10">
    </td>
  </tr>
  <tr class="row2">
    <td>
      <input class="adate" type="text" name="startDate" value="2015-10-10">
    </td>
    <td>
      <input class="adate" type="text" name="endDate" value="2015-10-10">
    </td>
  </tr>
</table>