如何在同一页面上以不同方式处理不同的日期选择器选项

Question

我在同一页面上有 2 个日期选择器。一个名称为 datePicker1，另一个名称为 datePicker2。我实际上有这样的代码，

$(".ui-state-active").parents('tr').css("border", "1px solid Green");
        $(".ui-datepicker-calendar tbody tr").live('click', function(){
           $(".ui-datepicker-calendar tbody tr:nth-child(" + ($(this).index() + 1) + ")").css("border", "1px solid Green");
        });

我想让上面的代码只适用于 datePicker1 而不是 2。实际上，问题是该代码适用于两个 datepicker。我怎样才能让它只适用于 datePicker1？

Answer 1

我不太确定你的名字是在哪里指定的，但如果你在 .ui-datepicker-calendar 元素上有一个 name 属性，请尝试使用以下方法：

$(".ui-state-active").parents('tr').css("border", "1px solid Green");
    $(".ui-datepicker-calendar[name=datePicker1] tbody tr").live('click', function(){
       $(".ui-datepicker-calendar tbody tr:nth-child(" + ($(this).index() + 1) + ")").css("border", "1px solid Green");
    });

否则，如果你可以提供带有代码的 jsfiddle ，那就太好了。

Answer 2

为日期选择器对象提供一个 ID 或更好的值，但为其父对象提供一个 id 并选择该特定项目而不是通用类。

Answer 3

首先，您不应该使用 .live()。它占用资源并且实际上已被弃用。

这是使用委托执行此操作的好方法：

$("body").on('click', '.ui-datepicker-calendar tbody tr', function(){
       $(this).next().css("border", "1px solid Green");
 });

这里的坏处是，尽管如此，仍然没有简单的方法来区分哪个输入字段启动了日期选择器。

我要做的是将 .focus() 事件连接到日期选择器字段，并添加一个类（如果它是您想要效果的字段），否则将其删除。

像这样：

$(".datepicker").focus(function() { 
    if ($(this).attr("id") == "datePicker1") {
        $("#ui-datepicker-div").addClass("greenBorders");
    } 
    else {
        $("#ui-datepicker-div").removeClass("greenBorders");
    }
});

然后像这样更新上面的代码：

$("body").on('click', '.greenBorders ui-datepicker-calendar tbody tr', function(){
       $(this).next().css("border", "1px solid Green");
 });