jQuery UI:根据类而不是id添加小部件

jQuery UI: Add widget depending on class not on id

本文关键字：id 添加 小部 UI jQuery      更新时间：2023-09-26

我是Apache Cordova和jQueryUI的新手。我只是想通过jQueryUI来格式化我的index.html的布局。

根据jQueryUI教程的这一部分，通过以下两个代码片段添加了一个小部件：

<input type="text" name="date" id="date">

（HTML）和

$( "#date" ).datepicker();

（在报头中的<script>标签中）。此示例为所有ID为date的html元素添加了datepicker小部件。

我现在的问题是，是否可以通过特定html类（或类似的东西）的id为其添加小部件。我的元素需要不同的id，因为我是通过Cordova的document.getElementById（）方法获得它们的。

这里是我的示例代码：

<head>
  <meta charset="utf-8" />
  <title>MyApp</title>
  <link href="jqueryui/css/ui-darkness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
  <script src="jqueryui/js/jquery-1.10.2.js"></script>
  <script src="jqueryui/js/jquery-ui-1.10.4.custom.js"></script>
  <script>
    // # = ID / . = Klasse
    $("#datepicket").datepicker();  // Works, widget is added for ID
    $(".button").button();          // Add widget by class WON'T WORK!
    $("#myBtn").button();           // Add widget by ID is OK - WORKS!
  </script>
</head>
<body>
  <button id="myBtn" class="button">
    My button
  </button>
...

如上所述，如果我使用id选择器"#myBtn"，ui格式化就可以工作，但当使用类选择器".button"时就不工作了。

有人知道如何避免这个相同的id问题（我也不喜欢为每个不同的id添加小部件设置（每个按钮id一个脚本行））？非常感谢。

*****************编辑-以下代码工作**********************

...
  <script>
     // THIS function declaration I've forgotten!!!
     $(function () {
        $(".button").button();  // # = ID / . = Klasse
        $(".datepicker").datepicker();
    });
  </script>
...

尝试

$( document ).ready(function() {
   $(".button").each(function() {
      $(this).button();
   });
});
相关文章：