Question

我正在尝试制作一个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没有解决任何问题。

Answer 1

这根本不是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');
});

jQuery $（this）选择器无法正常工作

1 个答案: