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習慣を取り除きます:

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>

ライブデモ

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プラグインを作成する方法について、非常に基本的な例を作成しました
。

于 2013-11-03T06:10:07.857 に答える
1

モーダル ヘルプとそこに表示されるモーダル リンクの間に 1 対 1 の関係がある場合は、インデックスを使用してクラス値を一致させる必要性を単純化できます。

このため、一意のクラス名は必要ありません。むしろ、複雑すぎるだけです。以下は、クラスが一意のままであることを前提としていますが、

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

問題は、値が 1 つしかない ID ではなく、クラス属性が多くのクラスで構成される可能性があることです。正確にはきれいではありませんが、機能しているように見える1つの解決策は次のとおりです。

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

jsフィドル

または、同等に

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

jsフィドル

于 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 に答える