Question

场景：我有一个包含多个可折叠面板的.aspx页面。每个小组代表不同的报告。要运行报告，请单击面板，将显示报告的用户控件。我创建的日期范围控件可以包含在“多个”面板中。

以下代码在多个面板实例中不起作用。它将所有“迄今为止”的文本框设置为等于开始日期，而不仅仅是活动面板的“迄今为止”文本框。

如何使用我已展开的面板中的文本框？

感谢您的帮助！

<script type="text/javascript">
  $(document).ready(function(){
    $('#dFrom').datepicker();
    $('#dTo').datepicker();

    $('#dTo').click(function(){
    try{    

        var from = $('#dFrom').datepicker("getDate");

        $('#dTo').datepicker("setDate",from);

        }
        catch(Error)
        {
        alert(Error);
        }
    });
  });

Answer 1

首先，您不应该对任何存在多次的html元素使用ID，而是使用类来识别重复元素。

要回答您的问题，您需要使用$（this）指向click事件来自的特定元素。然后，您可以通过询问其兄弟来简单地查询调用事件的日期选择器。

$(document).ready(function(){
    $('.dTo').click(function(){
        var from = $(this).siblings('.dFrom').datepicker("getDate");
        $(this).datepicker("setDate",from);
    });
});

我不知道你的实际HTML结构，所以你可能不得不改变兄弟姐妹的发现方式，但希望你能得到这个想法。

Answer 2

您需要使用选择器语法获得更多相关性。我看到你正在使用每个字段的id - 这是否缩短了ASP.Net的UniqueID？因为这绝对不是它的样子。

不是手动查找id，而是让ASP.Net自己创建它，并找到它们的jQuery方式：

$(Function() {
  $('input[id$=dFrom]').datepicker();
  $('input[id$=dTo]').datepicker();
  $('.panel').each(function() { //replace with appropriate selector syntax for your panels
    $(this).click(function() {
      var from = $('input[id$=dFrom]',this).datepicker("getDate");
      $('input[id$=dTo]',this).datepicker("setDate",from);
    });
  });
});

jQuery DatePicker和.NET-一个日历控件，但在一个.aspx页面上有多个实例

2 个答案: