类前缀作为每个函数的选择器

Question

我可以使用 ID 前缀作为选择器来完成此操作，但我需要能够使用类来完成此操作。它是一个each函数，用于在同一页面上打开不同的模态窗口。我需要避免使用 ID 名称，因为我有一些模式窗口，它们在同一页面上有多个链接，并且在使用 ID 时，只有第一个链接有效。

这是使用 ID 的函数:

$('div[id^=ssfamodal-help-]').each(function() {
    var sfx = this.id,
        mdl = $(this),
        lnk = $('.link-' + sfx),
        cls = $('.ssfamodal-close'),
        con = $('.ssfamodal-content');

    lnk.click(function(){
        mdl.show();
    });
    cls.click(function(){
        mdl.hide();
    });
    mdl.click(function() {
        mdl.hide();
    });
    con.click(function() {
        return false;
    });
});

我正在尝试将其更改为类，例如:

   $('div[class^=ssfamodal-help-]').each(function() {
        var sfx = this.attr('class'),
        etc.

但如果不使用 ID，我就无法让它工作。可能吗？

编辑修复了 Vars 末尾的分号错误，并更新了 Fiddle 并修复了该错误。但仍然无法正常工作。

这是一个Fiddle

** 更新 **

更清楚地说，我需要能够在同一页面上多次引用同一模式。例如:

模态1

模态2

模态3

模态4

链接到模态 1

模态 2 链接

模态 3 链接

模态 4 链接

其他东西

链接到模态 1

模态 4 链接

模态 3 链接

其他东西

模态 2 链接

等等。

Answer 1

使用类时摆脱ID习惯:

className1, className2, className3 ... etc

简单地使用

className

HTML:

<div class="ssfamodal-help-base ssfamodal-backdrop">
    <div id="help-content" class="ssfamodal-content">
        <span class="ssfamodal-close">[x]</span>
        Howdy
    </div>
</div>

<div class="ssfamodal-help-base ssfamodal-backdrop">
    <div id="help-content" class="ssfamodal-content">
        <span class="ssfamodal-close">[x]</span>
        Howdy Ho
    </div>
</div>

<span class="link-ssfamodal-help-base">One</span>
<span class="link-ssfamodal-help-base">Two</span>

LIVE DEMO

var $btn = $('.link-ssfamodal-help-base'),
    $mod = $('.ssfamodal-help-base'),
    $X   = $('.ssfamodal-close');

$btn.click(function(i) {
  var i = $('[class^="link-"]').index(this); // all .link-** but get the index of this!
  // Why that?! cause if you only do:
  // var i = $('.link-ssfamodal-help-base').index();
  // you'll get // 2
  // cause that element, inside a parent is the 3rd element
  // but retargeting it's index using $('className').index(this);
  // you'll get the correct index for that class name!

  $('.ssfamodal-help-base').eq(i).show()     // Show the referenced element by .eq()
  .siblings('.ssfamodal-help-base').hide();  // hide all other elements (with same class)

});
$X.click(function(){
   $(this).closest('.ssfamodal-help-base').hide();
});

_{来自文档:
http://api.jquery.com/eq/
http://api.jquery.com/index/
http://api.jquery.com/closest/}

这里我创建了一个非常基本的示例，说明如何创建自己的 jQuery 插件来处理模态:http://jsbin.com/ulUPIje/1/edit
请随意使用和滥用。