Question

我有这个HTML：

<div id="alumni_articles" class="slide-category" style="display:none">
    <ul id="alumni_articles_mode_switch" class="mode_switch">
        <li><a href="#" class="active show_slide_view">Slide View</a></li>
        <li>|</li>
        <li><a href="#" class="show_list_view">List View</a></li>
    </ul>
    <div id="alumni_slide_content">
        .
        .
        .
    </div>
</div>

我正在尝试使用此jQuery代码从相反的链接中删除active类，并将其添加到刚刚单击的类中：

function showAlternateView(view)
{
    $("#alumni_articles_mode_switch li a").removeClass("active");
    $("#alumni_articles_mode_switch li a.show_"+view).addClass("active");
}

当分别点击“列表视图”和“幻灯片视图”时，该功能会传递"list_view"或"slide_view"。

正确调用该函数，并传递正确的参数。问题是jQuery返回一组空对象以从中删除类或将其添加到。

（除了“校友”之外还有“教师”和“学生”变体，我正在尝试构建通用解决方案，而不是直接将ID放在<a>元素上。）

我在选择器和ID上尝试了很多的变体，但无法让它工作。

我错过了什么？

Answer 1

尝试这样的事情：

var $ul = $('#alumni_articles_mode_switch');

$ul.on('click','a',function(){
    if(!$(this).hasClass('active')){
        $ul.find('a').toggleClass('active');
    }
});

这应该在它们之间切换类，只要只有两个，并且一个以active开头。 if逻辑只是为了防止在单击已经处于活动状态的链接时切换。

jsFiddle example here

jquery找不到<a> within <ul></ul></a>

1 个答案: