Question

我在我的网站上使用jQuery UI datepicker，并希望根据它所在的页面设置它的样式略有不同。但是，我有一点问题，因为包含日历的div不会嵌套到应用.datepicker（）函数的元素。所以我不能每页不同的样式。例如

<body>
<div id="wrapper">...</div>
<div id="datepicker">...</div>
</body>

我知道一个解决方案是根据页面来识别正文，但我并不想这样做，因为我正在使用CMS，目前它将类添加到包装器div以确定哪个页面。但是，由于datepicker div出现在包装器外部，我无法正确设置样式。

是一种配置datepicker以在特定div中创建日历div的方法，还是我必须要识别身体？

由于

Answer 1

您可以使用jquery将一个类添加到#datepicker。

$("#wrapper.pageClass").nextAll("#datepicker").addClass("someClass");

修改

或者你可以使用jquery用div包装#datepicker。如果#wrapper只定义了一个类，则以下内容可能有效。

var pageClass = $("#wrapper").attr("class"); $("#datepicker").wrap("<div class='" + pageClass + "' />"

Answer 2

如果我正确地阅读，并且这是一个漫长的一天，你有一个非常简单的选择，但它确实需要一点额外的标记。给body i d（每页不同的ID）：

body#pageOne #datepicker {/* css for pageOne */}

body#pageTwo #datepicker {/* css for pageTwo */}

如果没有别的，你可以提供一些额外的语义信息;虽然它可能不像你想的那么容易。

或者，如评论中所述（感谢@Bryan Downing）如果您不想添加id body，您可以使用jQuery来实现类似的功能，尽管它取决于您的CMS如何将类应用于#wrapper。但是这样的事情：

$(document).ready(
    function() {

        var pageClass = $('#wrapper').attr('class');

        $('#datepicker').addClass(pageClass);
    }
);

然后，希望这应该允许你像这样定位CSS：

#datepicker.pageOneClassName {/* css */}

#datepicker.pageTwoClassName {/* css */}

但显然这取决于CMS应用的连贯且可预测/已知的命名策略。虽然因为它与Bryan's answer非常接近，但我还是支持他。虽然我会将其保留在原位，因为它提供的解决方案略有不同。

每页的样式jQuery UI Datepicker不同

2 个答案: