jQuery使用“ this”但仅用于类吗？

问题描述

| 我不确定这是否容易实现，但是如果有一种简单的方法可以实现，那真的很方便。 如果我有一个元素列表用于打开和关闭不同的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();
});

我知道这行不通。某处一定有+可能是可能的，但对于我的一生，我无法使其正常工作。 任何帮助，不胜感激。     

解决方法

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

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

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

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

    ,        从单击的项目中获取类的建议是有效的，但正如某些人所评论的那样，如果li具有多个类，则该建议将会中断。如果您开始进行大量的课程学习，也会变得有些混乱。 我认为最好从不同的角度进行处理，这对于li具有多个类的情况是灵活的，并且可以将常见行为合并为一个普通类。我称该类为切换。我将原始类留在li上，以免更改不必要的标记，但是如果仅将其用于单击选择器，则可以将其删除。

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

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

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

编辑：您可以在jsfiddle上实时查看和测试。 编辑2：如果每个类只有一个div，则可以使用id代替类。在每个div上放置一个id，在lis上放置一个data-targetid属性，然后在点击处理程序中使用#id选择器。