1

所以就像我的标题所暗示的那样。我正在使用 switchy 在我的站点上创建开关。现在，一个工作完美。但是我需要 6 个，而且我一次不能让超过一个工作，即使使用不同的 ID/名称。

任何人都可以帮忙吗？

$('#switch-me').switchy();

     <select id='switch-me'>
        <option value='on'>on</option>
        <option value='off'>off</option>
      </select>

谢谢

--

 <link href="CSS/switchy.css" rel="stylesheet" type="text/css" />
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="CSS/application.css" rel="stylesheet" type="text/css" />
    <link href="CSS/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/jquery.animate-color.js"></script>
    <script type="text/javascript" src="js/jquery.event.drag.js"></script>
    <script type="text/javascript" src="js/switchy.js"></script>
    <script type="text/javascript" src="js/application.js"></script>

    <script>
    $(function() {
        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
    });
    $(".switch").switchy();

    </script>
  <select class="switch">
  <option value="female">female</option>
  <option value="male">male</option>
</select>
<select class="switch">
  <option value="yes">yes</option>
  <option value="no">no</option>
</select>
<select class="switch">
  <option value="false">false</option>
  <option value="true">true</option>
</select>
4

1 回答 1

0

更新为您的编辑：

问题是您正在运行

$(".switch").switchy();

在 DOM 中存在这些元素之前的行，因为您已将其放在ready处理程序之外，但位于 HTML 文件中的元素之上：

$(function() {
    // The code in here will wait for "DOM ready"
    $( "#from" ).datepicker({
        /* ... */
    });
    $( "#to" ).datepicker({
        /* ... */
    });
});
// But *this* will run *immediately*, and not find the elements, because they
// don't exist yet
$(".switch").switchy();

只需将您移动到您script的末尾body（就在结束</body>标记之前），无论如何这是最好的，或者将该switchy行移动到您的ready处理程序中。

这是我的 JSBin 更新，因此您可以确切地看到它的script位置：Live Copy | 资源

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://lou.github.io/switchy/switchy.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://lou.github.io/switchy/switchy.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<select class="switch">
  <option value="female">female</option>
  <option value="male">male</option>
</select>
<select class="switch">
  <option value="yes">yes</option>
  <option value="no">no</option>
</select>
<select class="switch">
  <option value="false">false</option>
  <option value="true">true</option>
</select>
<script>
// Note that this is *after* the elements above, and
// so they exist when it runs
$(".switch").switchy();
</script>
</body>
</html>

原始答案（这似乎是您编辑的来源）：

查看switchy site，这似乎很简单：

<select class="switch">
  <option value="female">female</option>
  <option value="male">male</option>
</select>
<select class="switch">
  <option value="yes">yes</option>
  <option value="no">no</option>
</select>
<select class="switch">
  <option value="false">false</option>
  <option value="true">true</option>
</select>

接着：

$(".switch").switchy();

实例| 资源

这里的关键是我们输入的选择器$()需要选择多个元素，而不仅仅是一个。在您作为评论发布的代码中，您只选择了一个元素（带有 的元素id "switch-me"）。在上面，我使用了一个类，这样我就可以选择所有三个select元素，然后switchy在它们上触发插件。

于 2013-04-30T06:58:26.697 回答