我被困在一个插件上，我正在写一个插件来显示和隐藏大文本中的内容。下面的html是使用文本编辑器中的短代码加载的。

<p>Completely synergize resource
  <a href="#" class="btn-context">   
    solutions.
  </a>
</p>

<p class="inside-context">
  Dynamically innovate resource-leveling
</p>

我的jQuery显然是用类打开所有段落的。内部上下文。但是一篇文章中可能有多个短代码，所以我只想显示单击的链接的内容。

 $(".btn-context").on(\'click\', function (event) {.
        if ($(\'.inside-context\').hasClass(\'open\')) {
            $(\'.inside-context\').removeClass(\'open\');
        } else {
            $(\'.inside-context\').addClass(\'open\');
        }

        event.preventDefault();
 });

我试过：

使用$（this），但这只适用于链接，这并不重要在尝试了很多之后，我想我可能会被迫添加更多属性以使其正常工作，所以我为两个短代码都添加了一个ID，并为每个添加的短代码增加ID的值。（只是因为我不想每次用短代码包装文本时都手动设置ID）

这可能行得通，但我仍然没有找到一种使用jQuery的方法。ID递增的我的短代码。

function context( $content=null ) {
  STATIC $id = 0;
  $id++;

  $content = preg_replace( \'/<br class="nc".\\/>/\', \'\', $content );
  $result = \'<p id="\'. $id .\'" class="inside-context">\';
  $result .= do_shortcode( $content );
  $result .= \'</p>\';

 return force_balance_tags( $result );
}

我应该如何处理这个问题？我不想让它在文本编辑器中使用得尽可能简单。

完整的东西在里面this JSfiddle.

 $(".btn-context").on(\'click\', function (event) {
        event.preventDefault();
        $(\'.inside-context\').removeClass(\'open\');
        $(this).parent().next(\'p.inside-context\').addClass(\'open\');

 });