1

我可以使用 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 的修正。仍然无法正常工作。

这是一个小提琴

** 更新 **

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

模态1

模态2

模态 3

模态4

链接到模式 1

链接到模式 2

链接到模式 3

链接到模式 4

其他的东西

链接到模式 1

链接到模式 4

链接到模式 3

其他的东西

链接到模式 2

等等。

4

5 回答 5

2

使用类时要改掉这个ID习惯：

类名1，类名2，类名3 ...等

只需使用

班级名称

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>

现场演示

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 随意使用和滥用。

于 2013-11-03T06:10:07.857 回答
1

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

出于这个原因，您不需要唯一的类名，而它们只是使事情过于复杂。以下假设类保持唯一但是

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

也相信这段代码比原来的方法更具可读性

DEMO

于 2013-11-03T06:23:23.330 回答
1

问题是类属性可以包含许多类，而不是只有一个值的 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

于 2013-11-03T05:57:18.317 回答
0

你为什么不写

$('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 的类的名称

谢谢。

于 2013-11-03T10:40:14.573 回答
0

你可以试试这个，

 $('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/

于 2013-11-03T05:55:33.577 回答