如何将 $(this) 传递给选择器

Posted 2023-03-05

【中文标题】如何将 $(this) 传递给选择器

【英文标题】：How to pass $(this) to selector

【发布时间】：2015-09-13 02:54:20

【问题描述】：

我有一个 jquery 点击处理程序，它可以切换列表元素之一：

$(document).on('click', 'ul li', function() 
    $(this).toggleClass('expanded');
);

有了它，我可以更改单击展开和折叠的元素。

但是，如果我只希望一个元素被展开，而之前展开的元素在我点击另一个元素时关闭呢？

我想将$(this)（点击li）和li.expanded 传递给toggleClass('expanded') 的jQuery 选择器。

类似的东西（但这不起作用）：

$(document).on('click', 'ul li', function() 
    $(this, 'ul li.expanded').toggleClass('expanded');
);

提前致谢！

统一更新： 即使之前（在页面开始时）没有展开任何元素，我也需要这个功能才能工作，并且当我点击它时能够折叠以前展开的元素。

如果使用它无法正常工作（不展开第一项）：

$('li.expanded', this).toggleClass('expanded');

但适用于：

$('li.expanded').toggleClass('expanded');
$(this).toggleClass('expanded');

【参考方案1】：

只是改变了传递给选择器的参数的位置。 jquery 选择器接受第二个参数context。你可以在哪里传递当前上下文this:

$('ul li.expanded',this).toggleClass('expanded');

相当于：

$(this).find('ul li.expanded').toggleClass('expanded');

完整片段：

$(document).on('click', 'ul li', function() 
  $('ul li.expanded').not($(this).find('ul li.expanded')).removeClass('expanded'); 
  $('ul li.expanded',this).toggleClass('expanded');
);

【讨论】：

我认为这只会为单击的元素切换扩展类，但不会从前一个 .expanded 元素中删除该类

【参考方案2】：

ToggleClass 在您的上下文中不起作用。它的折叠所有 li 使用 addClass 和 removeClass 而不是

$(document).on('click', 'ul li', function() 
    $('ul li.expanded').removeClass('expanded'); // remove class expanded
    $(this).addClass('expanded'); // add class current li
);

【讨论】：

那么这不可能用一种方法做到这一点吗？

@s.webbandit - 你只在你的问题中说“但是，如果我只希望一个元素被展开，而之前展开的元素在我点击另一个元素时关闭呢？”

【参考方案3】：

您可以从所有li 元素中删除“扩展”类并将其添加到单击的元素中：

这段代码

$('ul li.expanded',this).toggleClass('expanded');

在这种情况下不起作用

工作演示

$(document).on('click', 'ul li', function() 
  $('ul li').removeClass('expanded');
  $(this).addClass('expanded');
);

li.expanded  color:red 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="expanded">test</li>
  <li>test2</li>
  <li>test3</li>
  <li>test4</li>
</ul>

【参考方案4】：

你需要交换！

$('ul li.expanded', this).toggleClass('expanded');

这是您的代码。上下文 this 应该是下一个！

$(document).on('click', 'ul li', function() 
    $('ul li.expanded', this).toggleClass('expanded');
);

【参考方案5】：

我认为你需要

$(document).on('click', 'ul li', function() 
    $(this).addClass('expanded'); //Add class to current li
    $('ul li.expanded').not(this).toggleClass('expanded'); //Toggle class from other li's
);