0

我正在尝试通过添加一些附加功能来制作一个我正在使用的 jQuery carousel 插件。

$("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 文件之一冲突有关。但是，jquery noconflict 没有解决任何问题，除非我尝试错了。

4

1 回答 1

7

这根本不是 jQuery 和 DOM API 的工作方式。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 回答