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

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，我无法让它工作。有可能吗？

EDIT 修正了 Vars 末尾带有分号的错误，并更新了 Fiddle 的修正。不过还是不行。

这是Fiddle

** 更新 **

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

模态1

模态2

模态 3

模态4​​p>

模式 1 的链接

模式 2 的链接

模式 3 的链接

模式 4 的链接

其他东西

模式 1 的链接

模式 4 的链接

模式 3 的链接

其他东西

模式 2 的链接

等。

Answer 1

在使用类时要摆脱ID的习惯：

className1、className2、className3 ...等

简单地使用

类名

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 插件来处理 modals：http://jsbin.com/ulUPIje/1/edit
随意使用和滥用。

Answer 2

问题是类属性可以包含许多类，而不是只有一个值的 ID。以下是一种不太干净但似乎有效的解决方案。

$('div').filter(function () {
    var classes = $(this).attr('class').split(/\s+/);
    for (var i = 0; i < classes.length; i++) 
        if (classes[i].indexOf('ssfamodal-help-') == 0)
            return true;
    return false;
}).each(function() {
    // code
});

jsFiddle

---

或者，等价

$('div').filter(function () {
    return $(this).attr('class').split(/\s+/).some(function (e) {
        return e.indexOf('ssfamodal-help-') == 0;
    });
}).each(function() {
    // code
});

jsFiddle

Answer 3

如果模态帮助和它出现的模态链接之间存在一对一的关系...可以通过使用索引来简化匹配类值的需要强>。

因此，您不需要唯一的类名，而它们只是使事情变得过于复杂。以下假设类保持唯一

var $helps=$('div[id^=ssfamodal-help-]');
var $help_links=$('div[id^=link-ssfamodal-help-]');

$help_links.click(function(){
    var linkIndex= $help_links.index(this);
    $helps.hide().eq( linkIndex ).show();
});
 /* not sure if this is what's wanted, but appeared original code had it*/
 $helps.click(function(){
      $(this).hide()
 })

/* close buttons using traverse*/
$('.ssfamodal-close').click(function(){
    $(this).closest('div[id^=ssfamodal-help-]' ).hide();
});

也相信这段代码比原来的apporach更易读

DEMO

Answer 4

你可以试试这个，

 $('div[class^=ssfamodal-help-]').each(function() {


     var sfx = $(this).attr('class');

         console.log(sfx); 
         /*console log:
           ssfamodal-help-base ssfamodal-backdrop
           ssfamodal-help-base2 ssfamodal-backdrop
         */

 });

演示：http://jsfiddle.net/xAssR/51/

Answer 5

你为什么不这样写

$('div.classname').each(function() {

// you can write your desired code here
        var sfx = this.attr('class');
        var aa= this.attr('id');
});

或

$('.classname').each(function() {
// you can write your desired code here
        var sfx = this.attr('class');
        var aa= this.attr('id');
});

其中 classname 是用于 html 中 div 的类的名称

谢谢。