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.实际上，问题是代码在两个日期选择器上都有效。我怎样才能使它只适用于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

为datepicker对象提供ID或更好的ID，但为其父级提供id并选择该特定项而不是通用类。

Answer 3

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

这是与委托一起做的好方法：

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

这里的坏处是，尽管如此，没有简单的方法来区分哪个输入字段启动了datepicker。

我要做的是将.focus()事件连接到datepicker字段，如果是想要效果的字段，则添加一个类，否则将其删除。

像这样：

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

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

3 个答案: