0

いくつかの追加機能を追加することで、使用しているjQueryカルーセルプラグインをより動的にしようとしています。

$("ul#carousel").roundabout();

$("ul#carousel li").click(function() { 
    var id = $(this).attr("id");
    var id_num = id.substr(-1);

    for( var i=0;i<4;i++)
    {
        if(i != id_num)
        {                   
              $("li#list_"+ i +" .table_box").attr("class", "table_box");
        }
    }

    $(this +" .table_box").attr("class", "sub_table_box");
});

php

<ul id="carousel">
<?php
     for($i=0;$i<4;$i++)
     {
          echo "<li id='list_".$i."'>
                   <div class='table_box'>

                   </div>
                </li>";
     }
 ?>
 </ul>

Chrome の JavaScript コンソールで、リスト項目をクリックすると、次のようなエラーが表示されます。

 Uncaught Syntax error, unrecognized expression: [object HTMLLIElement]

私のjquery-1.7.min.jsファイルで。

プラグインスクリプトが他のjsファイルの1つと競合していることに関係があるのではないかと考えています。しかし、間違って試してみない限り、jquery noconflict は何も解決しませんでした。

4

1 に答える 1

7

これは、jQueryとDOMAPIがどのように機能するかではありません。thisはHTML要素であるため、文字列を連結して子をクエリすることはできません。変化する

$(this +" .table_box")

に

$(this).find(".table_box")

forループ内の要素はどうですか？$（this）.find（ "li＃list _" + i + ".table_box"）。attr（ "class"、 "table_box"）;を使用してみました しかし、それはうまくいきませんでした。

それは、thisがすでにであるためです<li>。ループ全体を次のように置き換えることができます。

$(this).siblings().find('.sub_table_box').removeClass('sub_table_box').addClass('table_box');

要約すると（そして他のいくつかのスタイルの改善を追加する）：

$("ul#carousel").on('click', 'li', function() {
    $(this)
        .addClass('sub_table_box');
        .siblings()
        .find('.sub_table_box')
        .removeClass('sub_table_box')
        .addClass('table_box');
});
于 2013-03-07T03:46:13.540 に答える