1

私のタイトルが示すように。私は自分のサイトにスイッチを作成するために switchy を使用しています。今、1つは完全に機能しています。しかし、私は 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>switchyready

これが更新された私の JSBin で、どこにあるかを正確に確認でき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>

元の回答（編集のソースのようです）：

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();

実例| ソース

ここで重要なのは、フィードするセレクター$()が 1 つだけでなく、複数の要素を選択する必要があることです。コメントとして投稿したコードでは、1つの要素 ( が付いている要素)のみを選択していid "switch-me"ます。上記では、代わりにクラスを使用して、3 つの要素すべてを選択し、それらのプラグインselectをトリガーできるようにしました。switchy

于 2013-04-30T06:58:26.697 に答える