Question

我能够使用ID前缀作为选择器，但我需要能够用类来代替它。这是在同一页面上打开不同模态窗口的每个功能。我需要避免使用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

**更新**

为了更清楚，我需要能够在同一页面上多次引用相同的模态。 E.g：

MODAL 1

MODAL 2

MODAL 3

MODAL 4

链接到MODAL 1

链接到MODAL 2

链接到模式3

链接到模式4

其他东西

链接到MODAL 1

链接到模式4

链接到模式3

其他东西

链接到MODAL 2

ETC。

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();
});

_{来自DOCS：

http://api.jquery.com/eq/

http://api.jquery.com/index/

http://api.jquery.com/closest/}

在这里，我创建了一个非常基本的例子，说明如何创建自己的jQuery插件来处理模态：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的类的名称

感谢。

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

5 个答案: