Question

我不确定这是否容易实现，但如果有一种简单的方法可以实现这一目标，那将非常方便。

如果我有一个元素列表用于打开和关闭不同的div，我可以写下一个笨拙的jQuery下面的诀窍：

<ul>
  <li class="classone">Show or Hide 1</li>
  <li class="classtwo">Show or Hide 2</li>
</ul>
<div class="classone">Div 1</div>
<div class="classtwo">Div 2</div>

<script>
  $('li.classone').click(function() {
    $('div.classone').toggle();
  });
  $('li.classtwo').click(function() {
    $('div.classtwo').toggle();
  });
</script>

...但是使用这个会更好，但仅限于课程。像：

$('li.this').click(function() {
  $('div.this').toggle();
});

我所知道的不起作用。它必须有可能在某处有一点点，但对于我的生活，我无法让它工作。

非常感谢任何帮助。

Answer 1

从元素中获取类并在选择器中使用：

$('li.classone,li.classtwo').click(function() {
  $('div.' + $(this).attr('class')).toggle();
});

Answer 2

如果您有多个班级，这可能会中断

<script>
$('li.classone').click(function() {
    $('div.'+$(this).attr('class')).toggle();
});
$('li.classtwo').click(function() {
    $('div.'+$(this).attr('class')).toggle();
});
</script>

Answer 3

从点击的项目中获取类的建议是有效的，但正如一些人所评论的那样，如果li有多个类，它将会中断。如果你开始为很多课程做这件事，它也会变得有点混乱。

我认为从不同的角度来看是更好的选择，这对于li有很多类的情况是灵活的，并且将共同的行为合并到一个普通的类中。我打电话给那个班级切换。我已经将原始类保留在li上，以免更改您的标记而不是必要的，但如果您只是将其用于点击选择器，则可以删除它。

<li class="toggle" data-targetclass="classone">One</li>
<li class="toggle" data-targetclass="classtwo">Two</li>

使用公共切换类来绑定应该触发行为的所有lis，然后使用特定的data-属性来确定要切换的div。

$('li.toggle').click(function(){
    var target = $(this).data('targetclass');
    $('div.' + target).toggle();
});

编辑：您可以在jsfiddle上看到此内容并进行测试。

编辑2 ：如果每个类只有一个div，则可以使用id而不是类。在每个div上放置一个id，在lis上放置一个data-targetid属性，并在click处理程序中使用#id选择器。

jQuery使用'this'而只是为了这个类？

3 个答案: