Question

所以就像我的标题所暗示的那样。我正在使用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>

Answer 1

编辑时

更新：

问题是你正在运行

$(".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的 end （就在结束</body>标记之前），无论如何最好，或者移动{ {1}}将行放入<{1}}处理程序。

此处我的JSBin已更新，因此您可以确切了解switchy的位置：Live Copy | Source

ready

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

查看the switchy site，这看起来很简单：

script

然后：

<!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>

Live Example | Source

这里的关键是我们输入<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"插件。

使用Switchy - 需要一些帮助（JQUERY）

1 个答案: