简单的基于类的jQuery显示/隐藏多个独立实例? [英] SImple class-based jquery show/hide for multiple, independent instances?

问题描述

有没有一种方法可以在页面上仅使用类而不使用ID来实现许多基于jquery的显示/隐藏实例(切换链接后跟具有隐藏内容的容器；根据状态切换文本更改)?我在任何地方都找不到合理记录良好的功能示例.感谢您提供的所有帮助！ --cg

Is there a way to have many, many instances of jquery-based show/hide (toggle link followed by container with hidden content; toggle text changes depending on state) on a page using only classes and not IDs? I haven't found a reasonably well-documented, functional example anywhere. Thanks for any and all help! --cg

推荐答案

类似的东西

<div class="toggleset">
  <a class="toggler" href="#">Hide</a>
  <div class="container">
    Data to show/hide
  </div>
</div>

$('.toggler').click(function(evt) {
  var $toggler = $(this);
  var $container = $toggler.siblings('.container');

  $container.toggle();
  $toggler.text($container.is(':visible') ? "Hide" : "Show");
  evt.preventDefault();
});

如果使用next()代替兄弟姐妹，则不需要外部div，但是它将脚本与标记紧密联系在一起.

You don't need the outer div if you use next() instead of siblings, but it ties the script tighter to the markup.

这篇关于简单的基于类的jQuery显示/隐藏多个独立实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！