0

ファンシーボックス用の Jquery プラグインがあります。次のコードを使用すると動作することがわかっています。

$("a#roomthumb_2237").fancybox({ 
        'href'   : '#2237_Info',
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
});

しかし、このコードを (さまざまな href 値で) 複数回繰り返す必要がないようにするために、for ループで実行したいと考えています。

私が試したコードは次のとおりです。

for (var i = 0; i < rooms_array.length; i++) {
    var d = "#roomthumb_"+rooms_array[i]
    $(d).fancybox({ 
        'href'   : rooms_array[i]+'_Info', 
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
    });
};

元のコードは Google から直接取得しました (stackoverflow から取得した可能性が高いため、覚えていません)。それ。href 行が間違っていると思いますが、必要なことを行う方法を説明するものは何も見つかりません。

たとえば、 $("a#roomthumb_2237") を $("a"+d) として記述する方法がわかりません...

4

3 に答える 3

1

html<a>タグの通常の使用法は、href属性を持つことです。たとえば、次のような場合:

<a class="fancybox" href="#2237_Info">2237</a>
<a class="fancybox" href="#2238_Info">2238</a>
<a class="fancybox" href="#2239_Info">2239</a>

次に、fancybox スクリプトが 1 つだけ必要です (1 つだけ)。

$("a.fancybox").fancybox({ 
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
});

class="fancybox"前述のようIDに、同じドキュメント内で同じものを複数回使用してはならないため (IDs一意である) 、使用したことに注意してください。

hrefまた、fancybox スクリプト内でオプションを設定する必要がないことにも注意してください。これは<a>タグ自体から取得されるためです (hrefオプションは、セレクターに属性として存在しない場合、または「強制したい場合」に使用されます)。 "hrefセレクターとは異なります。)

一方、すべての<a>要素を手動で記述して配列から生成したくない場合は、https://stackoverflow.com/a/10093265/1055987を確認してください。

于 2012-07-08T20:10:47.770 に答える
0

hrefにクラスを設定し、クラスセレクターを使用してFancyBoxを呼び出してみませんか？

HTML

<a href="whatever.jpg" class="fancyboxMe" id="roomthumb_2237">Anchor</a>
<a href="whatever2.jpg" class="fancyboxMe" id="roomthumb_2233">Anchor</a>

JavaScript

$("a.fancyboxMe").fancybox({ 
        'href'   : '#2237_Info',
        'titleShow'  : false, 
        'transitionIn'  : 'elastic', 
        'transitionOut' : 'elastic' 
});
于 2012-07-08T17:49:11.777 に答える
0

私は自分の問題を修正しました。私のループは問題ありませんでしたが、間違っていた唯一のテキスト行は次のとおりでした。

    'href'   : rooms_array[i]+'_Info',

私はする必要がありました：

    'href'   : '#'+rooms_array[i]+'_Info',

今気付いたのは、本当に明らかです...セレクターを追加していませんでした。

編集: これが私の完全なコードで、現在は機能しています。注 - アイデアを示すために、配列に乱数を選択しました。

var rooms_array = [2235, 2236, 2237, 2238]; 
var reposition = function (){ 
    $('#hidden_stuff').attr('display', "none"); 

    $.each(rooms_array, function(key,value){ 
        var a = '#roomthumb_'+value;  
        var b = '#chosenrate_'+value; 

        if ($(b).length) { 
            var c = $(b).offset();  

            $(a).css({ 
                visibility:"visible", 
                top: c.top -9 + "px", 
                left: c.left + 560 + "px" 
            })
        }
        else{ 
        } 

        $(a).fancybox({ 
            'href'   : '#'+value+'_Info', 
            'titleShow'  : false, 
            'transitionIn'  : 'elastic', 
            'transitionOut' : 'elastic' 
        });
    }); 
};
于 2012-07-08T19:54:12.373 に答える