如何 onclick 触发非原生 jQuery 插件的操作？

Question

我已经安装了第 3 方 jQuery 插件（它是一个手风琴）。它显示在我的页面上，并且按预期工作。

当我单击页面上的图像时，我想触发插件的其中一个操作（打开特定幻灯片）。

我似乎无法获得正确执行此操作的代码和/或语法。

我安装的插件是“EasyAccordion”（http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/）。它的 .js 源代码发布在这里：http://pastebin.com/55JB4pr2。

我正在 Drupal7 页面上使用该插件。

我不认为特定的插件，或者它在 Drupal 中使用的事实，与正确的 jQuery 使用相关。

jQuery 与 Drupal 捆绑在一起。我在页面上初始化插件：

    ( function ($) {
        Drupal.behaviors.myEasyAccordion = {
            attach: function(context,settings) {
                $('#accordion1',context).easyAccordion({
                    autoStart:     false,
                    ...
                });
            }
        };
    })(jQuery);

在我的标记中，我

    ...
    <div id="accordion1">
     ... EASYACCORDION MARKUP ...
    </div>
    ...

再次使用这个 init &标记后，手风琴将按预期显示/工作。

在同一页面上，在另一个页面上，我添加了一个图像链接，即，

    ...
    <div id="myImg">
        <a><img src="myimg.png" /></a>
    </div>
    <div id="accordion1">
     ...  EASYACCORDION MARKUP ...
    </div>
    ...

我想单击“myImg”div 中的图像，并将 EasyAccordion 捕捉到特定的打开“窗格”。我认为，特定窗格的激活是由该

    line #127                jQuery.fn.activateSlide = function() {

函数解决的，如我上面提供的 Pastebin 链接所示。

Iiuc，我需要向上面的 init 函数添加代码，以将图像单击与 EasyAccordion 中的操作执行联系起来。

我的问题是——如何？

我想我需要启动（例如，对于幻灯片＃3），

    jQuery(this).activateSlide(3);

向 init添加一些变体

    $('#myImg').click(function () {
      ...
    });

，将其附加到 EasyAccordion init 的 function() 。类似的东西？

    ( function ($) {
        Drupal.behaviors.myEasyAccordion = {
            attach: function(context,settings) {
                $('#accordion1',context).easyAccordion({
                    autoStart:     false,
                    ...
                });
 ---->          $('#myImg',context).easyAccordion({ ...
 ---->          ?????????
 ---->          });
            }
        };
    })(jQuery);

到目前为止，我还没有找到正确的语法。至少，我无法让点击图像真正导致指定项目在 EasyAccordion 中“激活”。

我认为这两篇文章

http://stackoverflow.com/questions/5492258/easyacordion-jump-to-desired-slidenum-jquery-plugin
http://stackoverflow.com/questions/6243870/easyaccordion-jquery-plugin-callbacks

很接近。但我仍然没有得到将语法撬入我的 Drupal.behaviors... 节的权利。

有什么指导吗？

Answer 1

这有效。

向每张幻灯片添加一个可定位的类，以便标记：

    ...
    <div id="myImg">
        <a><img src="myimg.png" /></a>
    </div>
    <div id="accordion1">
    <dt class="slide_1" >
         ...
    <dt class="slide_2" >
         ...
    </div>
    ...

然后，在 init 中，

    ( function ($) {
        Drupal.behaviors.myEasyAccordion = {
            attach: function(context,settings) {
                $('#accordion1',context).easyAccordion({
                    autoStart:     false,
                    ...
                });
                $('#myImg',context).click(function() {
                    $("dt.slide_1").activateSlide();
                });
            }
        };
    })(jQuery);

现在，单击 #myImg div 中的 img 将打开目标幻灯片...此处为“slide_1”，如预期的那样。